小编d_b*_*gar的帖子

我一直试图解决这个问题，但没有找到一个强有力的答案。我正在尝试使用 useMutation 钩子执行登录突变。

TLDR；我想知道在选项中传递的 onError 和 useMutation 给我的错误之间到底有什么区别

这是我的代码片段

const [login, { data, loading, error }] = useMutation(LOGIN_QUERY, {
        variables: {
            email,
            password
        },
        onError(err) {
            console.log(err);
        },
});

在服务器端，我有一个用于登录的预设/硬编码电子邮件，我没有使用 Apollo 或任何其他客户端。在此登录突变的解析器中，如果电子邮件不相同，我只会抛出一个错误

throw new Error('Invalid Email');

现在我想在客户端（React）处理这个错误。但我担心的是，如果我使用从 useMutation 钩子返回的“错误”并尝试以这种方式显示错误

render() {
...
{error && <div> Error occured </div>}
...
}

错误在 UI 中更新，但随后 React 立即向我显示了一个带有 Unhandled Rejection (Error): Graphql error: My-custom-error-message 的屏幕

但是，如果我使用 onError 传递给 useMutate 函数的选项，那么它不会向我显示这个屏幕，我可以对错误做任何我想做的事情。

我想知道传递给选项的 onError 和 useMutation 给我的错误之间到底有什么区别，以及为什么 React 在不使用onError 时向我显示错误屏幕。

谢谢！

class App extends Component {
  constructor(props) {
    ...
  }

  onChange = (e) => this.setState({term: e.target.value})

  onSubmit(e){
    e.preventDefault();
    const api_key = "C1hha1quJAQZf2JUlK";
    const url = `http://api.giphy.com/v1/gifs/search?q=${this.state.term}&api_key=${api_key}`;
  }

  render() {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input value={this.state.term} onChange={this.onChange}/>
          <button>Search!</button>
        </form>
      </div>
    );
  }
}

在类中声明的两种类型的函数(onChange和onSubmit)之间有什么区别.我在const url中引用this.sate时出错,如果我将其声明为ES6类方法但将其更改为箭头函数则修复它.

我想知道在这两种情况下如何处理"这个"

另外,我该怎么做呢？比方说,如果我想使用相同的onSubmit函数(ES6类方法),但是当我调用它时(在表单元素中)想要处理它,我该怎么做？

使用this.onSubmit.bind(this)？