如何防止购物车模块出现重复商品？addToCart函数优化问询

你的问题出在每次调用addToCart时，不管商品是否已在购物车里，都会直接添加新的商品对象，导致重复。核心解决思路是先判断商品是否已存在，存在则更新数量，不存在再新增。

假设你的product对象包含唯一标识字段（比如id），以下是修改后的代码：

function addToCart(product, count) {
  // 复制现有购物车，避免直接修改原状态
  const newCart = [...cart];
  // 根据商品唯一标识查找是否已存在于购物车
  const existingItemIndex = newCart.findIndex(item => item.id === product.id);

  if (existingItemIndex !== -1) {
    // 商品已存在，累加数量
    newCart[existingItemIndex].count += count;
  } else {
    // 商品不存在，添加新购物车项
    const newItemInCart = { count, ...product };
    newCart.push(newItemInCart);
  }

  setCart(newCart);
}

关键说明： #

• 用findIndex结合商品唯一标识（如id）判断重复，这是解决问题的核心逻辑。
• 若商品已存在，直接更新对应项的count实现数量累加；不存在则执行新增操作。
• [...cart]是创建数组浅拷贝的简洁写法，和原代码的cart.map(item => item)效果一致。

如果你的商品唯一标识不是id，把item.id === product.id替换为对应的字段即可（比如item.sku === product.sku）。

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