javascript 超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时会发生这种情况
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49222113/
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
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate
提问by UWGOOSE
I'm making this Conway's game of life react project and it was working just fine but when I added the last couple of buttons to clear the board and some other functionalities react gave me this error
我正在制作这个康威的游戏反应项目，它运行得很好但是当我添加最后几个按钮来清除板子和其他一些功能反应给了我这个错误
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.
From the code snippets it's been showing me it seems that the clear() function is the problem here, but I don't think I did set state inside a render() to trigger an infinite loop. Here are all the code for the clear and componentDidMount, I don't have a componentWillUpdateor componentDidUpdatein my app.
从它向我展示的代码片段来看，clear() 函数似乎是这里的问题，但我认为我没有在 render() 内设置状态来触发无限循环。这是 clear 和 的所有代码，我的应用程序中componentDidMount没有componentWillUpdate或componentDidUpdate。
the clear() and Play function in the main class
主类中的 clear() 和 Play 函数
EDIT 1 : It's telling me that there's something wrong with the setState inside the play() function, however, I always implemented the play function this way and it was always working since the beginning....
编辑 1 ：它告诉我 play() 函数内部的 setState 有问题，但是，我总是以这种方式实现 play 函数并且它从一开始就一直在工作......
clear = ()=>{
var g = Array(this.rows).fill().map(()=> Array(this.cols).fill(false));
this.setState({
generations:0,
fullGrid: g
})
}
.....
play = () => {
let g1 = this.state.fullGrid;
let g2 = arrayClone(this.state.fullGrid);
for (let i = 0; i < this.rows; i++) {
for (let j = 0; j < this.cols; j++) {
let count = 0;
if (i > 0)
if (g1[i - 1][j]) count++;
if (i > 0 && j > 0)
if (g1[i - 1][j - 1]) count++;
if (i > 0 && j < this.cols - 1)
if (g1[i - 1][j + 1]) count++;
if (j < this.cols - 1)
if (g1[i][j + 1]) count++;
if (j > 0)
if (g1[i][j - 1]) count++;
if (i < this.rows - 1)
if (g1[i + 1][j]) count++;
if (i < this.rows - 1 && j > 0)
if (g1[i + 1][j - 1]) count++;
if (i < this.rows - 1 && this.cols - 1)
if (g1[i + 1][j + 1]) count++;
if (g1[i][j] && (count < 2 || count > 3)) g2[i][j] = false;
if (!g1[i][j] && count === 3) g2[i][j] = true;
}
}
this.setState({
fullGrid: g2,
generations: this.state.generations + 1
});
}
playButton = ()=>{
clearInterval(this.intervalId);
this.intervalId = setInterval(this.play, this.speed);
}
pauseButton = ()=>{
clearInterval(this.intervalId);
}
slow = ()=>{
this.speed = 1000;
this.playButton();
}
fast = ()=>{
this.speed = 100;
this.playButton();
}
clear = ()=>{
var g = Array(this.rows).fill().map(()=> Array(this.cols).fill(false))
this.setState({
generations:0,
fullGrid: g
})
}
The Button Class
按钮类
class Buttons extends React.Component{
handleSelect = (evt) =>{
this.props.gridSize(evt);
}
render(){
return (
<div className="center">
<ButtonToolbar>
<button className='btn btn-info' onClick={this.props.playButton}>
PLAY
</button>
<button className='btn btn-info' onClick={this.props.pauseButton}>
PAUSE
</button>
<button className='btn btn-info' onClick={this.props.clear}>
CLEAR
</button>
<button className='btn btn-info' onClick={this.props.slow}>
SLOW
</button>
<button className='btn btn-info' onClick={this.props.fast}>
FAST
</button>
<button className='btn btn-info' onClick={this.props.seed}>
SEED
</button>
<DropdownButton
title="Grid Size"
id="size-menu"
onSelect={this.handleSelect}
>
<MenuItem eventKey="1">20x10</MenuItem>
<MenuItem eventKey="2">50x30</MenuItem>
<MenuItem eventKey="3">70x50</MenuItem>
</DropdownButton>
</ButtonToolbar>
</div>
)
}
}
}
回答by Sean
Your onClickhandlers are being called continuously. Change them to functions that return the function you wish to call and this should fix your issue.
您的onClick处理程序不断被调用。将它们更改为返回您希望调用的函数的函数，这应该可以解决您的问题。
Example:
例子：
<button className='btn btn-info' onClick={() => this.props.playButton}>
PLAY
</button>
