React购物车添加重复商品：数量增加却新增空项问题求助

问题出在哪 #

1. 你直接修改了props.cartProducts里的原商品对象的productQuantity，这不符合React状态必须不可变更新的规则，容易导致状态同步出问题。
2. 当商品已存在时，你写的[...prevProduct, checkProdtExists.productQuantity++]是把递增后的数字值直接追加到购物车数组里了，这就导致数组多了一个非商品结构的元素，也就是你看到的“空项”。

修正后的代码 #

const addToCart = (productID, productBrand, productTitle, productPrice, productQuantity, productThumbnail) => {
  props.setCartProducts(prevProducts => {
    const productExists = prevProducts.find(product => product.productID === productID);
    if (productExists) {
      // 遍历原数组，找到对应商品就创建新对象更新数量，其他商品保持原样
      return prevProducts.map(product => 
        product.productID === productID 
          ? {...product, productQuantity: product.productQuantity + 1} 
          : product
      );
    } else {
      // 商品不存在就新增到购物车
      return [
        ...prevProducts,
        {
          productID,
          productBrand,
          productTitle,
          productPrice,
          productQuantity,
          productThumbnail
        }
      ];
    }
  });
}

为什么这么改 #

• 用map生成新数组，不会碰原state里的数组和对象，完全符合React的不可变更新要求，状态更新更可靠。
• 更新商品数量时，通过{...product}展开原对象再修改数量，保证每次更新都是新对象，React能正确识别状态变化。
• 把所有逻辑放在setCartProducts的回调里，确保每次都用最新的购物车状态来计算，避免因为闭包导致的旧值问题。

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