React useState更新后传入Redux的值为旧值如何解决？

React 中 useState 触发的状态更新是异步批处理的：在同一个同步执行的事件回调里调用状态更新方法后，当前函数作用域内捕获的状态值不会立刻变更，要等当前回调执行完成、组件重新渲染后，下一次函数执行时才能拿到更新后的新值。
你的代码里 setStateAction 和 onAdd 在同一个同步函数 onPressAdd 里执行，onAdd 运行时拿到的 countOfItemsInOrder 永远是当前渲染周期闭包里缓存的旧值，所以传给Redux的数值会始终滞后一次更新。

方案1：手动计算新值直接传递（最推荐，逻辑最直观） #

不要让 onAdd 依赖闭包中的状态值，在点击事件里先计算出最新的count值，同时传给状态更新方法和onAdd使用，从根源避免闭包旧值问题。
修改点击触发函数：

const onPressAdd = () => {
  const newCount = countOfItemsInOrder + 1;
  setStateAction(newCount);
  onAdd(newCount);
};

修改onAdd方法，接收传入的最新count值组装payload：

const onAdd = (latestCount) => {
  const totalPrice = servicesList.reduce(
    (sum, current) => sum + current.price,
    0,
  );
  const totalTime = servicesList.reduce(
    (sum, current) => sum + current.time,
    0,
  );

  const payload: OrderData = {
    id: 0,
    totalPrice,
    totalCount: latestCount, // 直接使用传入的最新值，不依赖闭包state
    totalTime,
    name,
    services: servicesList,
  };

  dispatch({type: actions.order.addOrder.type, payload});
};

方案2：通过useEffect监听状态变化后触发提交 #

移除点击事件里同步调用onAdd的逻辑，等状态真正更新完成、组件重渲染后，再通过useEffect监听到值变化，执行Redux提交逻辑。
代码修改如下：

const onPressAdd = () => {
  setStateAction(prevState => prevState + 1);
  // 这里不再同步调用onAdd
};

// 监听count值变化，值更新后再执行提交
useEffect(() => {
  // 补充业务判断条件，避免组件首次挂载时误触发提交
  if (/* 满足触发提交的业务条件，比如count是用户主动点击新增后的值 */) {
    onAdd();
  }
}, [countOfItemsInOrder]);

注意：该方案需要额外加判断逻辑过滤非用户操作触发的状态变化，否则容易出现非预期的提交。

方案3：统一状态管理来源 #

如果countOfItemsInOrder最终需要提交到Redux，可以直接将该状态放在Redux中维护，组件内不再单独存一份本地useState状态，所有更新、读取都走Redux，从根源避免本地状态和全局状态不同步的闭包问题。

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