使用componentDidUpdate()修改state出现无限循环如何解决

你对componentDidUpdate的参数定义理解错了，这就是无限循环的直接原因：

• React类组件的componentDidUpdate钩子接收的参数顺序固定为：第一个是prevProps（更新前的props），第二个才是prevState（更新前的state），第三个是更新前的DOM快照值
• 你写的代码里把第一个参数命名为prevState，实际拿到的是旧的props对象，根本不是旧state。判断逻辑里取的prevState.selectedOption1实际是旧props上的selectedOption1属性，绝大多数场景下这个值是undefined，和当前state上的selectedOption1永远不相等，判断条件恒成立
• 条件恒成立的情况下，每次进入钩子都会执行setState，setState会触发组件重渲染，渲染完成后又会进入componentDidUpdate钩子，反复执行就形成了无限循环。

调整参数顺序，把第二个参数作为旧state使用，保证对比逻辑正确：

componentDidUpdate(prevProps, prevState) {
  // 正确对比更新前后的state字段
  if (prevState.selectedOption1 !== this.state.selectedOption1) {
    this.setState({ disabled2: false });
  }
}

所有在componentDidUpdate内调用setState的场景，必须加可终止的条件判断：要保证当state更新到目标状态后，判断条件不再成立，不会重复触发setState，从逻辑上避免循环触发。

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