多次触发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。   我们已经有数百条评论和几十个问题引起了人们的关注   吞下他们自己的错误，以及我们将打印它们的事实   至少一次现在似乎足以补偿印刷   当他们没有被捕，没有被吞没，没有一个时，他们两次   边界。