[英]Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate
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. 从代码片段开始,它一直在向我展示clear()函数似乎是这里的问题,但我认为我没有在render()中设置状态以触发无限循环。 Here are all the code for the clear and
componentDidMount
, I don't have a componentWillUpdate
or componentDidUpdate
in my app. 以下是clear和
componentDidMount
所有代码,我的app中没有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有问题,但是,我总是以这种方式实现播放功能,它从一开始就一直在工作....
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>
)
}
} }
Your onClick
handlers are being called continuously. 你的
onClick
处理程序被连续调用。 Change them to functions that return the function you wish to call and this should fix your issue. 将它们更改为返回您要调用的函数的函数,这应该可以解决您的问题。
Example: 例:
<button className='btn btn-info' onClick={() => this.props.playButton}>
PLAY
</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.