ID相同但尺码不同的商品加入购物车逻辑异常问题咨询

API 探路者

2026-10-16

问题根源

你现有代码的核心问题有三个：

查找已存在购物车商品的判断逻辑只校验了id，没有同时校验productSize，导致同id不同尺码的商品被误判为同一个条目
尺码不一致的分支逻辑错误，你直接修改了原有同id商品的尺码和数量，而不是新增独立条目，完全违背了预设的业务需求
你已经新增了tempId作为唯一标识，但后续的更新、删除操作还是用了重复的id作为查询条件，自然会抛出错误

修复方案

你只需要调整addItemToCart的匹配逻辑，后续所有单商品操作都用tempId作为唯一匹配条件即可，修复后的代码如下：

export const addItemToCart = (cartItems, cartItemToAdd, selectedSize) => {
  // 查找时同时匹配商品id和选中尺码，准确定位同一款同尺码的已加购商品
  const existingCartItem = cartItems.find(
    (cartItem) => cartItem.id === cartItemToAdd.id && cartItem.productSize === selectedSize
  );

  // 已存在同id同尺码的商品，直接数量+1
  if (existingCartItem) {
    return cartItems.map((cartItem) =>
      // 用全局唯一的tempId匹配，避免同id多尺码商品被误改
      cartItem.tempId === existingCartItem.tempId
        ? { ...cartItem, quantity: cartItem.quantity + 1 }
        : cartItem
    );
  }

  // 不存在则新增独立条目，用时间戳+随机数生成tempId，基本杜绝重复概率
  const tempId = `${Date.now()}-${Math.floor(Math.random() * 1000)}`;
  return [
    ...cartItems,
    {
      ...cartItemToAdd,
      tempId,
      quantity: 1,
      productSize: selectedSize,
    },
  ];
};