React教程实操出现Maximum update depth exceeded错误如何解决？

问题修复方案 #

错误原因 #

错误根源不在handleClick函数的逻辑，而在Square组件的事件绑定逻辑：你给按钮绑定onClick时写的是onClick={ props.onClick() }，加了括号相当于组件渲染阶段直接执行该函数，函数执行后调用setState触发组件重渲染，重渲染又会再次执行该函数，陷入无限循环，最终触发Maximum update depth exceeded报错。

修复代码 #

只需要修改Square组件的onClick绑定，去掉括号传递函数引用即可：

function Square(props) {
    return (
        <button
            className="square"
            onClick={props.onClick}
        >
            {props.value}
        </button>
    );
}

同类问题规避方法 #

• React事件绑定需要传递函数本身，而非函数执行的返回值：加括号的函数会在代码执行到当前行时立即运行，只有不加括号的函数名、箭头函数包裹的逻辑才会在事件真实触发时执行
• 遇到无限更新报错时，第一时间排查渲染阶段有没有直接触发setState的逻辑，除了事件绑定直接加括号的场景，还要检查useEffect、类组件render函数里有没有无限制调用setState的代码
• 可以借助React DevTools的组件更新监测功能，定位反复触发重渲染的组件，快速找到问题代码位置

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