React购物车功能异常求助：重复点击商品未更新数量

问题根源分析 #

• 匹配条件错误：原代码中addcart.find(a => a.API === dataStore)是用完整商品对象dataStore和商品标识a.API做比较，类型不匹配导致永远找不到已存在的商品，每次都执行新增逻辑。
• 数量更新语法错误：Item.quantity = + 1是将数量强制设置为1，而非累加，即使匹配成功也无法正确更新数量。
• 状态更新不规范：直接修改原对象属性并通过filter+push更新状态，违反React状态不可变原则，且依赖当前addcart状态可能因异步更新导致数据不一致。

修正后的代码 #

const addtoCart = (e, newData) => {
  setAddCart(prevCart => {
    // 通过商品唯一标识API查找购物车中是否已存在该商品
    const existingItem = prevCart.find(item => item.API === newData.API);

    if (!existingItem) {
      // 未找到则新增商品，添加初始数量1，不修改原newData对象
      return [...prevCart, { ...newData, quantity: 1 }];
    } else {
      // 找到则遍历购物车，更新对应商品的数量，保持其他商品不变
      return prevCart.map(item => 
        item.API === newData.API 
          ? { ...item, quantity: item.quantity + 1 }
          : item
      );
    }
  });
};

修正说明 #

1. 采用函数式状态更新：基于prevCart（React传入的最新购物车状态）操作，避免异步状态更新带来的数据不一致问题。
2. 正确匹配商品：用newData.API（商品的唯一标识）和购物车项的API字段对比，确保能找到已存在的商品。
3. 遵循不可变原则：新增或更新商品时都创建新对象，不直接修改原数据，保证React状态更新的可预测性。
4. 正确累加数量：使用item.quantity + 1实现数量递增，替代原错误的赋值写法。

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