React报错：Maximum update depth exceeded 求助（调用useContext的toggleLoad触发）

问题核心 #

你遇到的Uncaught Error: Maximum update depth exceeded错误，根源是useEffect重复执行fetchData，而fetchData中调用的toggleLoad触发上下文状态更新，导致组件反复渲染形成无限循环。同时代码中混用了组件内部的setLoad和上下文的toggleLoad管理加载状态，两种操作互相干扰，进一步加剧了循环问题。

之前尝试用toggleLoad代替toggleLoad()，本质是没有执行状态更新逻辑，所以Loader不显示；回调函数方案无效，大概率是依赖项处理不到位，或者仍在混用两种状态管理方式。

修复步骤 #

1. 统一加载状态管理 #

放弃组件内部的setLoad，完全使用useContext提供的加载状态控制逻辑，避免状态冲突。如果toggleLoad是单纯的切换函数（比如内部是setIsLoading(prev => !prev)），建议修改为支持直接设置状态的方法（接收布尔值参数），这样状态变更更可控。

2. 稳定useEffect的依赖项 #

用useCallback包裹fetchData，避免组件每次渲染都重新创建该函数，导致useEffect因依赖变化重复触发。同时确保useEffect的依赖项仅包含必要变量。

3. 优化异步请求的状态处理 #

使用finally块统一处理请求完成后的加载状态关闭，无论请求成功或失败，都能正确关闭Loader。

修改后的代码示例 #

// 从useContext获取支持直接设置状态的toggleLoad方法
const { toggleLoad } = useContext(LoadContext);

// 用useCallback稳定fetchData函数
const fetchData = useCallback(() => { 
  // 开启加载状态
  toggleLoad(true); 
  const payload = {}; 
  
  axios.post('', payload) 
    .then(res => { 
      const data = res.data.response; 
      // 简化空数据判断逻辑
      setNodata(!!data && data.length === 0);
      setDData(data); 
    })
    .catch(err => {
      // 可选：增加请求错误处理
      console.error('请求失败:', err);
    })
    .finally(() => {
      // 请求结束后关闭加载状态
      toggleLoad(false); 
    })
}, [toggleLoad, setNodata, setDData]); // 依赖项包含用到的上下文方法和状态更新函数

// 仅在组件挂载时调用一次fetchData（可根据需求调整依赖项）
useEffect(() => {
  fetchData();
}, [fetchData]);

额外注意点 #

• 如果无法修改toggleLoad的传参逻辑，可在调用前判断当前上下文的加载状态，避免重复切换触发不必要的更新。
• 检查useContext的Provider位置，避免无关组件因上下文更新而重复渲染。

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