React Context API电商购物车：删除商品总价上涨问题求助

你遇到的问题核心是状态更新不同步导致价格数组重复累积，我来帮你拆解问题并给出修复方案：

问题根源分析 #

你在useEffect里通过map循环调用setProductPrice，每次都用[...productPrice, prod.price]追加新价格，但React的setState是异步批量更新的——这意味着循环的每一次迭代中，productPrice始终是当前useEffect触发时的旧值，而非上一次setProductPrice更新后的值。

举个实际场景：

1. 购物车原本有3个商品，productPrice是[10,20,30]
2. 删除1个商品后，cartProducts变为2个，useEffect触发
3. 循环执行2次，每次都基于旧的[10,20,30]追加当前商品价格，最终productPrice变成[10,20,30,10,20]
4. 用这个重复的数组计算总价，自然会比实际价格高

修复方案 #

方案1：移除冗余中间状态（推荐） #

productPrice完全可以通过cartProducts直接推导，没必要单独维护这个状态，从根源避免状态不同步问题：

useEffect(() => { 
  // 直接从cartProducts计算总价，跳过中间的productPrice状态
  const total = cartProducts.reduce((acc, curr) => acc + curr.price, 0); 
  setTotalProductPrice(total); 
}, [cartProducts]);

方案2：正确更新productPrice状态（若需保留该状态） #

如果因为其他逻辑必须维护productPrice，请直接用cartProducts生成全新的价格数组，而非循环追加：

useEffect(() => { 
  // 一次性生成当前购物车所有商品的价格数组，替换旧状态
  const newProductPrices = cartProducts.map(prod => prod.price);
  setProductPrice(newProductPrices); 

  // 用新生成的数组计算总价
  const total = newProductPrices.reduce((acc, curr) => acc + curr, 0); 
  setTotalProductPrice(total); 
}, [cartProducts]);

额外建议 #

• 尽量避免维护可推导的中间状态，这类状态完全可以通过原状态实时计算，既减少代码复杂度，又能避免状态不同步的bug。
• 不要在循环中多次调用setState，React的异步更新机制会让这种写法产生不可预期的结果，应该一次性计算好完整的新状态后再调用一次setState。

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