React警告：更新深度超出最大值——useEffect内更新状态异常

DevOps 小满

2026-8-1

问题原因及解决方案

核心问题

你遇到的maximum update depth exceeded警告，本质是无限渲染循环：

你的useEffect未设置依赖数组，会在组件每次渲染完成后执行
useEffect内部调用setModalState更新状态，触发组件重新渲染
重新渲染后又会再次执行useEffect，循环往复导致超出React的渲染深度限制

另外，直接依赖modalState进行状态合并还可能引发闭包旧值问题，导致状态更新不符合预期。

修复步骤及优化代码

1. 给useEffect添加正确的依赖数组

仅在data发生变化时执行弹窗状态判断逻辑，避免无意义的重复执行。

2. 使用函数式更新状态

通过setModalState(prevState => {...})获取最新状态值，避免闭包导致的旧状态问题，同时不再需要依赖modalState。

3. 统一弹窗关闭逻辑

抽取重复的关闭弹窗代码为复用函数，减少冗余。

修改后的完整代码：

const [modalState, setModalState] = useState<IModalState>({
  showNoUsersModal: false,
  showModal: false,
});

// 统一弹窗关闭函数
const closeAllModals = () => {
  setModalState({
    showNoUsersModal: false,
    showModal: false,
  });
};

useEffect(() => {
  // 先判断data是否存在（避免null/undefined报错）
  if (!data) return;

  if (data.length > 0) {
    setModalState(prev => ({
      ...prev,
      showModal: true,
      showNoUsersModal: false,
    }));
  } else {
    setModalState(prev => ({
      ...prev,
      showModal: false,
      showNoUsersModal: true,
    }));
  }
}, [data]); // 仅依赖data变化触发

const onApplicationSuccess = () => {
  closeAllModals();
};

const onClose = () => {
  closeAllModals();
};

return (
  <div>
    {modalState.showNoUsersModal && (
      <NoUsersFoundModal onCancel={closeAllModals} />
    )}
    {modalState.showModal && (
      <SomeOtherModal onCancel={closeAllModals} />
    )}
  </div>
);