React康威生命游戏添加功能后触发Maximum update depth exceeded错误排查

首先，虽然你提到没在render()里直接调用setState，但最常见触发这类无限循环的场景是按钮事件绑定的写法错误——如果你的清除按钮是这么写的：

<button onClick={this.clear()}>清除棋盘</button>

这种写法会在组件渲染时立即执行clear()函数，而clear()里肯定调用了setState来重置棋盘状态，这会触发组件重新渲染，渲染时又会执行this.clear()，再次setState，如此往复就造成了无限循环。

正确的事件绑定方式 #

你需要把事件处理函数作为引用传递，而不是直接执行它：

• 方式一：使用箭头函数包裹

<button onClick={() => this.clear()}>清除棋盘</button>

• 方式二：在构造函数中绑定this（更推荐，避免每次渲染创建新函数）

constructor(props) {
  super(props);
  this.clear = this.clear.bind(this);
}

// 按钮写法
<button onClick={this.clear}>清除棋盘</button>

其他可能的排查方向 #

如果事件绑定没问题，再检查clear()函数内部：

• 有没有在setState的回调里又调用了setState或者其他触发状态更新的函数？比如：

clear() {
  this.setState({ board: emptyBoard }, () => {
    // 如果这里调用了startGame()这类会触发setState的函数，也可能导致循环
  });
}

• 有没有在componentDidMount里启动了定时器，而clear()没有正确清除它？比如你在componentDidMount里开了循环更新生命游戏状态的定时器，clear()只重置了棋盘但没停定时器，定时器持续触发状态更新也会引发异常。

你可以先检查按钮的事件绑定写法，这大概率是问题所在。

内容的提问来源于stack exchange，提问作者UWGOOSE