javascript 反应：超过最大更新深度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51196333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React: Maximum update depth exceeded
提问by dorkycam
I am getting this error when I run my code.
运行代码时出现此错误。
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.
超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，就会发生这种情况。React 限制嵌套更新的数量以防止无限循环。
And here's the code . it's referencing.
这是代码。它正在引用。
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 |
I set my stuff up the way the articles on the actual React site said to and it "came" with this neat console type thing, that's where I came up with the above code. I'm very new to React, JSX, and Javascript (and just programing in general) and I don't really understand what this means so if you could also explain a little that would be awesome.
我按照实际 React 站点上的文章所说的方式设置我的东西，它“附带”了这个简洁的控制台类型的东西，这就是我想出上述代码的地方。我对 React、JSX 和 Javascript（只是一般的编程）非常陌生，我真的不明白这意味着什么，所以如果你也能解释一下，那会很棒。
Thanks!
谢谢！
回答by Tholle
You are calling this.addQuestionin your render method, which in turn calls setStatewhich will result in a new render, and the indefinite loop continues.
您正在调用this.addQuestion您的渲染方法，该方法又会调用setState这将导致新的渲染，并且无限循环继续。
You want to give onClicka function reference, not call it directly.
你想给onClick一个函数引用，而不是直接调用它。
<button id="addQuestionButton" onClick={this.addQuestion}>Add Question</button>
回答by Romeo
this.addQuestion()invoked every time the component re-renders, thus causing a loop.
this.addQuestion()每次组件重新渲染时都会调用，从而导致循环。
Change the method this.addQuestion()to () => this.addQuestion()
将方法更改this.addQuestion()为() => this.addQuestion()
<button id="addQuestionButton" onClick={() => this.addQuestion()}>Add Question</button>
回答by Chris
The printed error message is quite self-explanatory. When you start your app, the this.addQuestion()is invoked directly, which triggers a re-render. The re-render will then invoke the same function again, and the loop continues until React has enough of it.
打印的错误消息一目了然。当您启动应用程序时，this.addQuestion()会直接调用 ，从而触发重新渲染。然后重新渲染将再次调用相同的函数，循环继续直到 React 有足够的函数为止。
Just like @Tholle said in his answer, simply give it the referenceto the function you want. Don't invoke it.
就像@Tholle 在他的回答中所说的那样，只需将其引用到您想要的功能即可。不要调用它。
Also, whenever you are setting a state variable whose value depends on the previous state, it is recommended to pass a callback function to setState()rather than an object. So instead do:
此外，每当您设置值取决于先前状态的状态变量时，建议将回调函数传递给setState()而不是对象。所以改为：
this.setState(prevState => ({numQuestions: prevState.numQuestions + 1}));
This is irrelevant from the error you are getting, but still something I would advise you to do.
这与您遇到的错误无关，但我仍然建议您这样做。
回答by Santosh Panda
Your function this.addQuestioncall at render time but as per your requirement it should call on while button onClick.
您的函数this.addQuestion在渲染时调用，但根据您的要求，它应该在按钮 onClick 时调用。
try this...
试试这个...
<button id="addQuestionButton" onClick={this.addQuestion}>Add Question</button>
<button id="addQuestionButton" onClick={this.addQuestion}>Add Question</button>
