Question

我正在学习Apollo Server和Apollo Client，并遵循一些在线示例。

以下是我所见过的一种范例，即阿波罗反应突变

render() {
    const {props: {history}} = this
    const {state: {username, password}} = this

    return <Mutation mutation={REGISTER}
                     onCompleted={() => history.push('/login')}>
      {(register, {data, error, loading}) => {
        if (error) {
          return <div>{error.toString()}</div>
        }
        if (loading) return <div>Loading...</div>
        return ({JSX form, etc})

它工作正常，并且当我遇到错误时（例如，在我的情况下是重复注册），我得到的是错误消息，而不是普通的JSX。我很困惑然后要“重置”页面。也就是说，我希望能够采取一些措施来“清除” Mutation的错误，并像错误到来之前一样将其返回到呈现JSX的状态（用户可以采取措施，或者我可以将错误超时，然后“重置”页面）。如果我刷新页面可以正常工作，但是显然我不想这样做！

我已经进行了一些搜索，然后立即发现自己对Apollo Client Cache的讨论非常深入，这是我接下来要学习的列表。目前，我想知道是否有一种更简单的方法来做我想做的事情。

任何线索都值得赞赏！

Answer 1

最简单的解决方案可能是使用React组件的状态来保存从突变返回的错误。然后向用户提供清除操作。

在您的示例上进行扩展，可能看起来像这样：

render() {
    const {props: {history}} = this
    const {state: {username, password, registrationError}} = this

    if (registrationError) {
      return (
        <div>
          {registrationError.toString()}
          <button onClick={() => this.setState({registrationError: null})}>
            Clear Error
          </button>
        </div>
      );
    }

    return <Mutation mutation={REGISTER}
                     onCompleted={() => history.push('/login')}
                     onError={(error) => this.setState({registrationError: error})}>
      {(register, {data, error, loading}) => {
        if (error) {
          // Just in case this is hit, return null
          return null;
        }
        if (loading) return <div>Loading...</div>
        return ({JSX form, etc})

请注意，错误呈现已从Mutation回调中移出。我不太确定

在发生带有react-apollo的Mutation错误后，如何“重置” React组件？

1 个答案: