javascript - react : Maximum update depth exceeded

Question

我在运行我的代码时遇到此错误。

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

这是代码。这是引用。

  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，该方法又调用 setState，这将导致新的渲染，无限循环继续。

您想给 onClick 一个函数引用，而不是直接调用它。

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