react事件处理程序中的错误被多次触发

Question

如果反应事件处理程序（在这种情况下为onChange）中发生错误，它将在控制台中显示两次。 这是正确的吗？ 也许我做错了什么？

onChange处理函数被调用一次。

我要在页面上设置监视，并且不想出现重复的错误。

在React v16中测试。

https://codesandbox.io/s/480y71xo00

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = { text: '' };
  }

  onChange(event){
    console.log('Call unknown function once');
    //!!!
    what();

    this.setState({
      text: event.target.value
    });
  }

  render(){
    const {text} = this.state;

    return (
      <div>
        <Hello name="CodeSandbox" />
        <h2>Start editing to see some magic happen {'\u2728'}</h2>
        <input type="text" value={text} onChange={this.onChange.bind(this)}/>
      </div>
    );
  }
}

render(<App />, document.getElementById('root')); 

如果您在输入中输入内容：

在Chrome中

但是在Safari中，错误如下所示：

Answer 1

此行为是有意的，在https://github.com/facebook/react/issues/10384中进行了说明，并在此处进行了讨论： https : //github.com/facebook/react/issues/10474

这是Dan Abramov的解释：

就上下文而言，发生这种情况的原因是因为我们在重新抛出之前故意让浏览器将错误解释为未捕获的错误。 理由在＃10474中讨论。

如果您遵循错误中的建议并添加错误边界（您应该这样做），则只会看到一次错误。 因此，这不是日常工作流程中的大问题。 实际上，它会促使人们添加错误边界，这很好。

这样做的另一个理由是，如果您不小心吞下了一个错误，我们仍然会打印一次。 仅此一点就值得海事组织（IMO）这样做。 由于人们吞下自己的错误，我们已经收到了数百条评论和数十个问题，而现在我们至少将它们打印一次的事实似乎足以弥补在未被捕获，未被吞下的情况下将它们打印两次的好处。 ，并且没有边界。