在Select下拉列表中使用useState<T>时状态更新延迟怎么解决

核心原因 #

这个问题是两个常见的React状态更新特性导致的：

1. useState的更新是异步的，调用setHwSalesPriceCurrency之后，当前函数作用域内的hwSalesPriceCurrency还是更新前的旧值，要等组件重渲染之后才会拿到最新状态。如果你的pricingTotal/uscCurrencyChanged函数内部直接依赖了hwSalesPriceCurrency状态，就会读到旧值。
2. 你的状态是对象类型，React对状态的更新判断是浅比较，如果Select返回的value和旧状态的对象引用地址相同（比如Select组件内部复用了同一个对象实例，仅修改内部属性），React会认为状态没有变化，不会触发重渲染，直到其他操作（比如文本框输入）触发了全局重渲染，状态才会同步更新。

可直接落地的解决方案 #

• 首先解决对象引用问题：调用set状态时对传入的对象做浅拷贝，生成新的引用地址，强制React触发重渲染
• 避免在set状态之后直接依赖当前作用域的旧状态值，把最新的选中值作为参数传给后续要调用的函数

修改后的代码示例 #

// onChange部分修改为：
onChange={({ value }: { value: ICurrency }) => {              
  console.log("onChange value::", value);              
  // 浅拷贝生成新对象，触发状态更新
  setHwSalesPriceCurrency({...value});
  uscCurrencyChanged(value.unit);
  // 直接把最新值传给pricingTotal，不要依赖当前作用域的旧状态
  pricingTotal(value);              
}}

如果你的pricingTotal函数之前是直接读取hwSalesPriceCurrency状态，调整为优先取传入的参数即可：

const pricingTotal = (latestCurrency?: ICurrency) => {
  // 优先用传入的最新值，兜底用状态里的值
  const targetCurrency = latestCurrency ?? hwSalesPriceCurrency;
  // 原有计算逻辑保持不变
}

可选优化 #

如果不想每次手动传参数，可以把pricingTotal的调用放到useEffect里，依赖项指定为hwSalesPriceCurrency，状态更新后会自动执行计算：

useEffect(() => {
  if (hwSalesPriceCurrency) {
    pricingTotal();
  }
}, [hwSalesPriceCurrency]);

// onChange里就可以删掉pricingTotal的调用：
onChange={({ value }: { value: ICurrency }) => {              
  setHwSalesPriceCurrency({...value});
  uscCurrencyChanged(value.unit);           
}}

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