反应：超过最大更新深度

Question

当我运行我的代码时，我收到了这个错误。

超过了最大更新深度。当组件重复调用组件WillUpdate或组件DidUpdate中的setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。

这是代码。它在引用。

  69 | }
  70 | 
  71 | addQuestion = () => {
> 72 |   this.setState({numQuestions: this.state.numQuestions + 1});
  73 |  }
  74 | 
  75 | render() {

  131 | <div className="field">
  132 |     <div className="endButtons">
  133 |       <button id="addQuestionButton"
> 134 |         onClick={this.addQuestion()}>Add Question</button>
  135 |       <input
  136 |         type="submit"
  137 |         value="Submit"

   5 | import App from './App';
   6 | import registerServiceWorker from './registerServiceWorker';
   7 | 
>  8 | ReactDOM.render(<App />, document.getElementById('root'));
   9 | registerServiceWorker();
  10 | 
  11 | 

我按照React网站上的文章所说的方式设置了我的东西，它“来了”于这个简洁的控制台类型，这就是我产生上述代码的地方。我对React、JSX和Javascript（以及一般的编程）很陌生，我不太了解这意味着什么，所以如果你也能解释一下，那就太棒了。

谢谢！

Answer 1

打印的错误消息非常不言自明。当您启动应用程序时，会直接调用this.addQuestion（），这会触发重新渲染。然后重新渲染将再次调用相同的函数，循环将继续，直到React有足够的循环。

就像@Tholle在回答中所说的那样，只需给它引用你想要的函数即可。不要调用它。

此外，无论何时设置状态变量，其值取决于前一状态，建议将回调函数传递给setState（），而不是传递给对象。因此，应：

this.setState(prevState => ({numQuestions: prevState.numQuestions + 1}));

这与你得到的错误无关，但我还是建议你做的。

Answer 2

这个。addQuestion（）在组件每次重新呈现时调用，从而导致循环。

更改方法this。将问题（）添加到（）=

<button id="addQuestionButton" onClick={() => this.addQuestion()}>Add Question</button>

Answer 3

您正在呼叫此。在呈现方法中添加Question，然后调用setStatesetState，这将导致新的呈现，无限循环将继续。

您希望给< code>onClick一个函数引用，而不是直接调用它。

<button id="addQuestionButton" onClick={this.addQuestion}>Add Question</button>