React useState更新状态后再次调用set方法仍读取旧值问题求解

根本原因 #

• 首先是React 闭包快照陷阱：组件每一次渲染都有独立的作用域，你当前渲染周期里的所有函数（包括被useCallback缓存的handleFromAmountInput、handleToAmountInput、setItemFieldHandler），引用的itemObj都是当前这一次渲染时的state快照，不会因为你调用了setItemObj就立刻改变当前作用域里的itemObj值。
• 其次是你两次状态更新都基于同一个旧的state快照：你调用setItemFieldHandler('fromAmount', 10)后，确实生成了新的state，但这个新state要等到下一次渲染才会生效，当前作用域里的itemObj还是{fromAmount:1, toAmount:5}。后续调用handleToAmountInput时，setItemFieldHandler还是基于这个旧的itemObj生成新状态，自然就把之前的fromAmount:10给覆盖掉了。
• 你加setTimeout没用的原因也是闭包：延迟执行的函数还是捕获了当前渲染周期的旧state快照，哪怕等5秒，拿到的还是当时的旧值，不会拿到更新后的state。

方案1：使用useState函数式更新（最推荐） #

把setItemFieldHandler里的状态更新改成函数式写法，每次更新都基于上一次的最新state，不受闭包影响：

const setItemFieldHandler = (key, value) => {
  console.log("set", key, value);
  // 函数式更新的参数prev永远是最新的状态
  setItemObj(prev => {
    console.log("old state: ", prev);
    const newState = {
      ...prev,
      [key]: value
    };
    console.log("new state: ", newState);
    return newState;
  });
};

同时因为状态更新不再依赖外部的itemObj，你可以把useCallback的依赖改成空数组，避免不必要的缓存失效：

const handleFromAmountInput = useCallback((value) => {
  setItemFieldHandler('fromAmount', value);
  if(areBothAmountsValid()) {
    const newToAmount = value + 1;
    handleToAmountInput(newToAmount);
  }
}, []);

const handleToAmountInput = useCallback((value) => {
  setItemFieldHandler('toAmount', value);
}, []);

方案2：合并两次状态更新 #

不需要分两次调用状态更新，直接在handleFromAmountInput里判断逻辑后，一次更新两个字段，仅触发一次重渲染，性能更好：

const handleFromAmountInput = useCallback((value) => {
  setItemObj(prev => {
    const newState = {...prev, fromAmount: value};
    if(areBothAmountsValid() && value > prev.toAmount) {
      newState.toAmount = value + 1;
    }
    return newState;
  })
}, []);

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