React/Redux同一函数作用域内更新状态后访问更新值问题

React函数组件的本地状态是和单次渲染快照绑定的常量，调用状态更新方法时，不会修改当前函数作用域内已经捕获的状态值，只会触发组件重渲染，更新后的状态值仅会在下一次组件函数执行时生成新的闭包值。
你在同一个按钮触发的函数作用域里调用状态更新后立刻读取状态，拿到的永远是当前渲染闭包里的旧值；useEffect是组件重渲染完成后才异步执行的逻辑，无法把新状态回传到已经在执行的点击事件函数作用域里，这也是你之前试useEffect没生效的根本原因。
另外async/await本身不能解决这个问题——React的状态更新没有返回Promise，没有办法直接被await，网上流传的加await Promise.resolve()拿新值的写法是React 18之前批处理逻辑不完善时的hack，在React 18全场景批处理的默认逻辑下完全失效，不要依赖这种写法。

• 优先直接复用计算出的新值（最简洁、性能最好）
  你更新状态时必然已经知道要设置的新值是什么，直接把这个值存在临时变量里复用即可，完全不需要等状态更新完成再读取：

  const handleButtonClick = () => {
    // 先计算出要设置的新状态值
    const newLocalValue = originValue + extraData;
    // 更新本地状态
    setLocalValue(newLocalValue);
    // 直接用提前存好的新值更新Redux，不需要等状态生效
    dispatch(updateReduxStore({ value: newLocalValue }));
  }
  

  这个方案完全符合React的设计逻辑，没有任何兼容问题，90%以上的类似场景都可以用这个方式解决。

• 联动更新逻辑放到useEffect，搭配触发标记控制执行时机
  如果你的新状态值是依赖前序状态计算、没法在点击事件里直接拿到最终值的，可以把Redux同步的逻辑移到监听对应状态的useEffect中，额外加一个标记位避免非预期触发：

  const [localValue, setLocalValue] = useState(initialValue);
  // 标记位：用来判断当前是否需要把状态同步到Redux
  const [needSyncRedux, setNeedSyncRedux] = useState(false);
  
  const handleButtonClick = () => {
    // 函数式更新可以拿到最新的前序状态，避免闭包旧值问题
    setLocalValue(prev => calculateNewValue(prev));
    // 打开同步标记
    setNeedSyncRedux(true);
  }
  
  useEffect(() => {
    // 只有标记为true的时候才执行同步，避免初始化、其他更新场景误触发
    if (needSyncRedux) {
      dispatch(updateReduxStore({ value: localValue }));
      // 同步完成后重置标记
      setNeedSyncRedux(false);
    }
  }, [localValue, needSyncRedux, dispatch])
  

  注意不要把dispatch逻辑写回点击事件函数里等useEffect传值，两个逻辑的执行上下文是完全独立的，没法直接跨上下文传值。

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