如何从两个不同函数调用修改状态？解决Maximum update depth exceeded错误

这个问题我太熟了！先给你拆解一下错误原因，再一步步讲正确的做法：

为什么会出现“Maximum update depth exceeded”错误？ #

这个错误本质是无限重渲染循环：你在组件的渲染周期里直接触发了状态更新（比如在组件函数体里直接调用状态修改函数，或者在没有依赖项控制的useEffect里反复执行更新）。每次状态更新都会让组件重新渲染，渲染时又触发更新，循环往复就超出了框架的最大渲染深度限制。

从不同函数修改状态的正确方式 #

核心原则是：状态更新函数只能在「用户交互事件」或「受控的副作用」中调用，绝对不能直接在组件渲染的主流程里执行。下面结合React场景给你举几个实际例子：

1. 封装状态更新函数，通过用户交互触发 #

把修改状态的逻辑封装成独立函数，只在按钮点击、输入变化等用户操作时调用：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // 封装第一个状态修改函数
  const increment = () => {
    // 推荐用函数式更新，避免闭包捕获旧值的问题
    setCount(prevCount => prevCount + 1);
  };

  // 封装第二个状态修改函数
  const reset = () => {
    setCount(0);
  };

  // 只有在用户点击按钮时才调用这些函数，不会触发无限渲染
  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={increment}>加1</button>
      <button onClick={reset}>重置</button>
    </div>
  );
}

2. 在受控副作用中调用多个状态更新函数 #

如果需要在组件挂载、或者某个依赖项变化时调用多个状态修改函数，一定要用useEffect并严格控制依赖项：

import { useState, useEffect } from 'react';

function DataLoader() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  // 封装包含多个状态更新的函数
  const loadData = async () => {
    setLoading(true);
    setError('');
    try {
      const response = await fetch('/api/data');
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError('加载数据失败');
    } finally {
      setLoading(false);
    }
  };

  // 只在组件挂载时调用一次（依赖项为空数组）
  useEffect(() => {
    loadData();
  }, []);

  return (
    <div>
      {loading && <p>加载中...</p>}
      {error && <p style={{color: 'red'}}>{error}</p>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

3. 处理多个函数修改同一状态的闭包问题 #

当多个函数都需要修改同一个状态，且新状态依赖旧状态时，一定要用函数式更新（setState(prevState => newState)），避免因为闭包捕获了旧的状态值导致更新不准确：

// 错误示例：两次increment只会让count加1
const incrementTwiceWrong = () => {
  setCount(count + 1);
  setCount(count + 1);
};

// 正确示例：用函数式更新，每次都基于最新的前一个状态
const incrementTwiceRight = () => {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
};

关键总结 #

• 禁止在组件渲染的主流程（函数体直接执行、无限制的useEffect）里调用状态更新函数，这是无限循环的根源。
• 把状态修改逻辑封装成独立函数，只在用户交互、受控副作用中触发。
• 依赖旧状态的更新一定要用函数式写法，保证状态修改的准确性。

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