React中基于前序状态更新state出现值为undefined的问题求助

别被打印的undefined误导了，你看到的undefined根本不是状态更新失败，是对useState返回的setter方法的认知有偏差：

• 所有useState生成的set更新函数（也就是代码里的setNewValue）执行后永远返回undefined，本身没有任何返回值，你把这个函数的执行结果赋值给incrementOne.value再打印，不管写啥逻辑，打出来的全是undefined。
• 你第一版尝试里把原本是数字类型的状态（初始值0）硬改成对象结构更新，属于完全的类型错配：数字本身不支持对象展开操作，{...0}最后会得到一个空对象，根本和你最开始定义的数字状态结构不匹配。

三套尝试方案的具体问题 #

• 第一套代码：状态类型错配。初始状态是数字类型的newValue，你在更新回调里返回了展开后的对象结构，会直接把原本的数字状态改成空对象，既不符合初始状态定义，也没法正常完成累加逻辑。
• 第二套代码：虽然语法上能跑出累加效果，但依赖当前闭包里捕获的旧newValue计算新值，连续高频触发提交时，会因为闭包残留旧值导致更新计算错误，完全满足不了你“基于前序状态更新”的核心需求。
• 第三套代码：本身的更新逻辑是完全正确的，能正常完成基于前序状态的累加操作，但是因为你把set函数的返回值（也就是undefined）存到对象里打印，才会误以为更新没生效，拿到了undefined的结果。

可正常运行的实现方案 #

先把两个容易踩的坑记牢，省得之后再绕：

1. Setter函数唯一的作用就是触发React的状态更新调度，本身不返回更新后的状态值。想要拿到最新状态，直接读取你定义的状态变量newValue就行——注意读取时机要在组件重新渲染的执行周期里，不要在调用setter的同步代码块里读，因为React的状态更新是异步批量调度的，同步代码里读的永远是更新前的旧值。
2. 你的状态初始值是数字类型，更新时直接返回计算后的数字结果就好，没必要硬套对象展开的逻辑。

完整可跑的代码示例：

const Form = (props) => {
  const [newValue, setNewValue] = useState(0);

  const submitHandler = (e) => {
    e.preventDefault();
    // 基于前序状态完成累加更新，执行后会触发组件重渲染，无返回值
    setNewValue((prevState) => prevState + 1);

    // 这里是同步执行逻辑，读到的还是更新前的旧值
    console.log('同步代码中读到的当前值：', newValue);
  };

  // 这行代码在每次组件重渲染时执行，能直接读到最新的状态值
  console.log('重渲染周期读到的最新值：', newValue);

  return (
    <form onSubmit={submitHandler}>
      <span>当前显示值：{newValue}</span>
      <button type="submit">点击累加</button>
    </form>
  );
};

如果需要在事件回调的同步逻辑里拿到即将更新的目标值，别等setter给你返回值，手动基于更新逻辑计算就行：

const submitHandler = (e) => {
  e.preventDefault();
  // 手动计算下一次的目标值，直接可以在当前逻辑中使用
  const nextValue = newValue + 1;
  setNewValue(nextValue);
  // 这里直接打印你算出来的nextValue，就是即将更新的目标值，不会拿到undefined
  console.log('即将更新的目标值：', nextValue);
};

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