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

Question

如果在react事件处理程序中发生错误（在本例中为onChange），则在控制台中显示两次。这是对的吗？也许我做错了什么？

onChange处理程序被调用一次。

我打算在我的页面上设置监控，不希望出现重复错误。

反应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。我们已经有数百条评论和几十个问题由于人们吞下他们自己的错误而引起的，而且我们至少打印过一次这样的事实现在似乎已经足够的好处来弥补他们未被捕获，未吞下两次打印它们，并没有边界。