React中setState二次调用重置为默认值的原因及修复方案

问题原因 #

核心问题是闭包捕获了过时的state快照，尤其常见于包含异步操作（比如登录请求的Loading状态切换）的场景：

• 当你在表单提交这类事件处理函数中发起异步请求时，函数内部会捕获当前执行时刻的state值；
• 异步请求完成后再调用setState时，此时代码中引用的state还是请求发起时的旧值（比如初始的x:1）；
• 如果用setState({ ...state, 新属性 })这种直接依赖当前state的写法，就会基于旧的初始状态更新，最终表现为state被重置。

举个你代码里可能出现的错误示例：

function LoginForm() {
  const [state, setState] = useState({ x: 1, loading: false });

  const handleSubmit = (e) => {
    e.preventDefault();
    // 第一次setState，成功将x设为2
    setState({ ...state, x: 2 });
    // 模拟异步登录请求
    setTimeout(() => {
      // 这里的state还是初始的{x:1, loading:false}
      setState({ ...state, loading: false });
      // 结果x被重置为1
    }, 1500);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 邮箱、密码输入框 */}
      <button type="submit" disabled={state.loading}>
        {state.loading ? '加载中...' : '登录'}
      </button>
    </form>
  );
}

修复方法 #

使用函数式更新调用setState，这种方式会自动传入最新的state快照作为参数，确保每次更新都基于当前最新状态：

修改后的代码示例：

function LoginForm() {
  const [state, setState] = useState({ x: 1, loading: false });

  const handleSubmit = (e) => {
    e.preventDefault();
    // 第一次更新用函数式写法，基于最新prevState修改
    setState(prevState => ({ ...prevState, x: 2 }));
    // 模拟异步登录请求
    setTimeout(() => {
      // 二次更新同样用函数式，确保拿到最新的state
      setState(prevState => ({ ...prevState, loading: false }));
    }, 1500);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="邮箱" required />
      <input type="password" placeholder="密码" required />
      <button type="submit" disabled={state.loading}>
        {state.loading ? '加载中...' : '登录'}
      </button>
      {/* 错误提示区域 */}
    </form>
  );
}

关键注意点：

• 当state更新依赖于之前的state值，或者在异步操作中更新state时，必须使用setState(prevState => 新状态)的函数式写法；
• 对于复杂的state对象，用扩展运算符...prevState保留未修改的属性，避免状态丢失；
• 这种写法能彻底避免闭包导致的过时state问题，保证每次更新都基于最新的状态快照。

内容的提问来源于stack exchange，提问作者Felipe K. Bernardino