如何在函数中获取useState当前最新值（附Codepen复现示例）

你拿不到正确state值是三个问题叠加导致的：

• 代码语法错误：input的onChange回调没有接收事件对象e，原代码写的onChange={() => setState({ text: e.target.value })}里e根本没有定义，正确写法应该是onChange={(e) => setState({ text: e.target.value })}
• 作用域覆盖错误：你给handleAppend定义了同名形参state，但绑定点击事件的时候根本没传这个参数，函数内部拿到的state永远是undefined，和组件里声明的state状态完全没关系
• 闭包特性限制：React的状态更新是异步批量执行的，调用setState之后，当前渲染周期形成的闭包里的state变量不会立刻改变，必须等组件重渲染完成、新的闭包生成后才能拿到更新后的值，不存在直接在当前同步逻辑里读取更新后state变量的方法，所有拿最新值的方案都是绕开闭包限制实现的。

根据你的使用场景选对应的方案即可：

方案1：修正基础错误，走正常React数据流（90%场景适用） #

先把前面两个低级错误修掉，正常用户操作流程下（输入完成后再点按钮）完全可以拿到正确值：

const App = () => {
  // 给state一个初始值，避免多余的空值判断
  const [state, setState] = React.useState({ text: '' });

  // 删掉多余的形参，直接引用组件作用域的state
  const handleAppend = () => {
    console.log("click");
    console.log(state.text + " foobar");
  };

  return (
    <div className="app">
      <div className="row">
        <span>Text: </span>
        {/* 补全事件参数，加上受控组件绑定 */}
        <input
          type="text"
          value={state.text}
          onChange={(e) => setState({ text: e.target.value })}
        />
      </div>
      <div className="row">
        <button onClick={handleAppend}>
          Append "foobar" to text and log it to console
        </button>
      </div>
    </div>
  );
};

注意：这个方案下，如果你在同一个同步函数里先调用setState再立刻读取state，拿到的还是更新前的旧值，这是React的设计，不是bug。

方案2：useRef存状态副本（需要同步拿最新值的场景用） #

如果你确实需要在setState调用后、组件重渲染前拿到最新值，用useRef存一份状态的同步副本，ref的更新是同步生效的，不受闭包限制：

const App = () => {
  const [state, setState] = React.useState({ text: '' });
  // 初始化ref存状态
  const latestState = React.useRef(state);
  // 每次状态更新就同步把最新值塞给ref
  React.useEffect(() => {
    latestState.current = state;
  }, [state]);

  const handleAppend = () => {
    console.log("click");
    // 从ref上取的值永远是最新的，和重渲染时机无关
    console.log(latestState.current.text + " foobar");
  };

  // 同步拿值示例
  const syncUpdateDemo = () => {
    const newState = { text: 'new input value' };
    setState(newState);
    // 手动同步更新ref，不需要等重渲染
    latestState.current = newState;
    // 这里立刻就能拿到最新值
    console.log(latestState.current.text);
  };

  return (
    <div className="app">
      <div className="row">
        <span>Text: </span>
        <input
          type="text"
          value={state.text}
          onChange={(e) => {
            const newVal = { text: e.target.value };
            setState(newVal);
            // 输入时同步更新ref
            latestState.current = newVal;
          }}
        />
      </div>
      <div className="row">
        <button onClick={handleAppend}>
          Append "foobar" to text and log it to console
        </button>
      </div>
    </div>
  );
};

方案3：setState回调拿值（仅适合基于最新状态更新的场景） #

如果你不需要单独把值取出来用，只是要基于最新状态计算新的状态值，直接给setState传函数参数就行，回调的入参保证是最新的状态：

const handleAppendAndUpdate = () => {
  setState(prev => {
    // prev就是当前最新的状态，不受闭包影响
    const nextText = prev.text + " foobar";
    console.log(nextText);
    // 返回值作为新的state
    return { ...prev, text: nextText };
  });
};

• 别靠setTimeout赌时间差拿值，重渲染时机受React调度影响，完全不可控
• 不要在事件处理函数里定义和外层state同名的形参，会直接覆盖作用域内的状态变量，导致取值异常
• React 18 之后所有场景下的更新默认都是批量处理的，不要假设setState会同步修改当前闭包里的state变量

内容的提问来源于stack exchange，提问作者Kirk Ross