gpt4 book ai didi

javascript - 超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时,可能会发生这种情况

转载 作者:数据小太阳 更新时间:2023-10-29 06:09:34 25 4
gpt4 key购买 nike

我正在制作这个 Conway 的生命游戏 React 项目,它工作得很好,但是当我添加最后几个按钮来清除棋盘时,React 的一些其他功能给了我这个错误

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.

从它向我展示的代码片段来看,clear() 函数似乎是这里的问题,但我认为我没有在 render() 中设置状态来触发无限循环。这是清除和 componentDidMount 的所有代码,我的应用程序中没有 componentWillUpdatecomponentDidUpdate

主类中的clear()和Play函数

编辑 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
})
}

按钮类

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>
)
}

最佳答案

您的 onClick 处理程序不断被调用。将它们更改为返回您希望调用的函数的函数,这应该可以解决您的问题。

例子:

<button className='btn btn-info'  onClick={() => this.props.playButton}>
PLAY
</button>

关于javascript - 超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时,可能会发生这种情况,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49222113/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com