购物车重复添加商品时更新数量而非新增条目问题及代码优化咨询

我来帮你搞定这个重复商品的问题！你当前的代码不管商品是否已经在购物车里，都会直接把新的商品对象追加到cart数组里，这才导致了视图里出现重复条目。咱们只需要在添加前做个存在性检测，再决定是增加现有商品的数量，还是添加新商品就行。

核心思路 #

1. 添加商品时，先通过商品的唯一标识（比如你示例里的key，如果用id就替换成id）检查购物车中是否已有该商品
2. 如果存在：遍历购物车数组，只更新对应商品的数量
3. 如果不存在：给新商品加上quantity字段（初始值1），再添加到购物车
4. 同时修正REMOVE_FROM_CART的逻辑，让它也支持减少数量（而不是直接删除），并保持state的结构正确

修改后的完整代码 #

const initialState = { cart: [], total: 0 };

const cartItems = (state = initialState, action) => {
  switch(action.type) {
    case 'ADD_TO_CART':
      // 查找购物车中是否已存在当前商品
      const existingItem = state.cart.find(item => item.key === action.payload.key);
      
      if (existingItem) {
        // 存在则更新对应商品的数量
        return {
          ...state,
          cart: state.cart.map(item => 
            item.key === action.payload.key 
              ? {...item, quantity: item.quantity + 1} 
              : item
          ),
          // 总数量加1，也可以用reduce计算更严谨：
          // total: state.cart.reduce((sum, item) => sum + item.quantity, 0) + 1
          total: state.total + 1
        };
      } else {
        // 不存在则添加新商品，默认数量为1
        return {
          ...state,
          cart: [...state.cart, {...action.payload, quantity: 1}],
          total: state.total + 1
        };
      }
    
    case 'REMOVE_FROM_CART':
      const targetItem = state.cart.find(item => item.key === action.payload.key);
      
      if (targetItem.quantity > 1) {
        // 数量大于1时，只减少数量
        return {
          ...state,
          cart: state.cart.map(item => 
            item.key === action.payload.key 
              ? {...item, quantity: item.quantity - 1} 
              : item
          ),
          total: state.total - 1
        };
      } else {
        // 数量为1时，直接移除商品
        return {
          ...state,
          cart: state.cart.filter(item => item.key !== action.payload.key),
          total: state.total - 1
        };
      }
    
    default:
      return state;
  }
};

关键细节说明 #

• Immutable 原则：所有修改都返回新的对象/数组，不直接修改原state，符合Redux的要求
• 唯一标识：我用了你示例中的key作为商品的唯一判断依据，如果你的实际数据用id，只需要把所有item.key替换成item.id即可
• quantity字段：你的原始商品数据没有数量字段，所以添加新商品时必须手动加上quantity:1，这样后续才能进行增减操作
• Total 计算：我这里用了简单的+1/-1，如果担心total和实际数量不一致，可以改用reduce计算总和，比如：

  total: state.cart.reduce((accumulator, currentItem) => accumulator + currentItem.quantity, 0)
  

这样修改后，再添加已存在的商品时，就只会增加对应商品的数量，不会出现重复条目啦！

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