React报错Maximum update depth exceeded

通常是由于组件陷入无限渲染循环导致的。

一、错误触发场景

1. 在渲染过程中直接调用状态更新
   在render方法或函数组件主体中调用setState会立即触发重新渲染。
2. useEffect依赖项缺失或错误
   未正确设置依赖数组或依赖项在每次渲染时变化，导致useEffect循环。
3. 生命周期方法中的不当操作
   在componentDidUpdate中无条件调用setState。

二、解决方案

1. 修复useEffect循环

// 错误示例（缺少依赖项）
useEffect(() => {
  setData(processedData); 
}); // 缺少依赖数组

// 正确写法
useEffect(() => {
  setData(processedData);
}, [processedData]); // 明确依赖项

2. 避免渲染时直接修改状态

// 错误示例（渲染时调用setState）
function Component() {
  const [count, setCount] = useState(0);
  setCount(1); // 直接调用导致循环
  
  return <div>{count}</div>;
}

// 正确写法（通过事件或useEffect触发）
function Component() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(1);
  }, []);
}

3. 类组件中的修复方案

class MyComponent extends React.Component {
  state = { count: 0 };

  // 错误示例（无条件更新）
  componentDidUpdate() {
    this.setState({ count: 1 });
  }

  // 正确写法（添加条件判断）
  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      this.setState({ count: 1 });
    }
  }
}

三、特殊场景处理

1. MobX状态管理
   当使用@observer时，避免在render方法中直接修改observable值。
2. 测试环境问题
   测试中mock数据未正确处理可能导致useEffect循环。

四、调试建议

1. 使用React DevTools检查组件更新链
2. 在useEffect中添加console.log检查执行频率
3. 对复杂依赖项使用useMemo缓存计算结果