React函数组件中useState异步更新致购物车价格异常的疑问

核心原因 #

React的useState状态更新是异步批量处理的——调用setPrice只是向React发起了状态更新请求，React会在当前任务批次完成后才重新渲染组件、更新price的新值。在当前函数作用域内，price变量会保留当前渲染周期的旧值，不会立刻同步变更。

代码对比解析 #

问题代码失效原因 #

setPrice(origPrice * numberOfPizza);
array.pizza.price = price;

执行setPrice后，price并没有马上变成计算后的新值，此时赋值给购物车的依然是更新前的旧价格，所以结果错误。

修复后代码生效原因 #

setPrice(origPrice * numberOfPizza);
array.pizza.price = origPrice * numberOfPizza;

这里直接使用当前渲染周期中能获取到的origPrice和numberOfPizza实时计算结果赋值，完全绕开了异步更新的price状态，自然能拿到正确的价格。

额外优化建议 #

1. 遵循不可变数据原则：直接修改pizzaSharedToCart.pizzaCart的做法不符合React状态更新规范，容易引发组件不渲染的问题，应该创建新数组更新：

// 替换原直接修改数组的代码
const updatedCart = [...pizzaSharedToCart.pizzaCart];
updatedCart[properties.eachIndex] = {
  ...updatedCart[properties.eachIndex],
  numberPizza: numberOfPizza,
  sizePizza: sizeOfPizza,
  price: origPrice * numberOfPizza
};
pizzaSharedToCart.setPizzaCart(updatedCart);

2. 移除冗余状态：price可以通过origPrice和numberOfPizza实时计算，没必要单独维护状态，避免同步问题：

// 移除price状态，用useMemo实时计算当前价格
const currentPrice = useMemo(() => {
  const objPizza = dataPizza.find(single => single.pizzaId === properties.pizzaId);
  if (!objPizza) return 0;
  const origPrice = objPizza.price.find(singlobjpr => singlobjpr.unit === sizeOfPizza)?.value || 0;
  return origPrice * numberOfPizza;
}, [sizeOfPizza, numberOfPizza, properties.pizzaId, dataPizza]);

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