React电商项目购物车异常：同一商品重复添加而非增量更新求助

核心问题本质 #

添加商品时未通过商品唯一标识（如id）判断购物车内是否已存在该商品，导致每次点击添加都生成新条目，而非对已有商品的数量进行增量更新。

关键代码排查与修复 #

1. 购物车添加逻辑（重点检查App.js） #

先定位处理添加购物车的函数（通常是addToCart），确认是否做了存在性判断：

• 错误逻辑示例（直接追加新商品）：

const addToCart = (product) => {
  setCart([...cart, product]);
};

• 修复后的正确逻辑：

const addToCart = (product) => {
  // 用商品id匹配已有条目
  const existingItem = cart.find(item => item.id === product.id);
  
  if (existingItem) {
    // 存在则更新数量
    setCart(cart.map(item => 
      item.id === product.id 
        ? {...item, qty: item.qty + 1} 
        : item
    ));
  } else {
    // 不存在则新增条目，默认数量为1
    setCart([...cart, {...product, qty: 1}]);
  }
};

2. 商品页触发逻辑（检查ProductScreen.js） #

确认点击“添加到购物车”按钮时，传递的商品对象包含稳定的唯一id：

• 确保传递的product对象使用后端返回的唯一标识，而非临时生成的字段：

// 正确传递完整商品对象（含唯一id）
<button onClick={() => addToCart(product)}>添加到购物车</button>

3. 购物车渲染逻辑（检查CartScreen.js） #

渲染购物车列表时，key属性必须绑定商品唯一id，避免因索引或非唯一字段导致渲染异常：

{cart.map(item => (
  <CartItemComponent key={item.id} item={item} />
))}

额外排查点 #

• 验证商品数据：确认“Adidas Fit Shirt”的所有实例是否共用同一个id，若API返回不同id（如每次请求生成新标识），也会导致重复添加。
• 状态管理校验：若使用Redux等状态管理库，检查ADD_TO_CART reducer逻辑是否和上述一致，确保正确处理已有商品的数量更新。

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