React-Redux电商购物车实现商品数量累加功能问题求助

问题核心原因 #

你当前的ADD_TO_CART reducer逻辑未判断购物车中是否已存在相同ID的商品，每次触发都会直接追加新的商品条目，所以不会更新数量。

解决方案 #

第一步：修改reducer文件的ADD_TO_CART逻辑 #

直接替换你原有的ADD_TO_CART分支代码即可：

case ADD_TO_CART:
  // 查找购物车中是否已有同ID商品
  const existingItemIndex = state.cart.findIndex(item => item.id === action.payload.id)
  if (existingItemIndex > -1) {
    // 商品已存在，更新数量和总价
    const updatedCart = [...state.cart]
    const existingItem = updatedCart[existingItemIndex]
    updatedCart[existingItemIndex] = {
      ...existingItem,
      quantity: existingItem.quantity + 1,
      // 如果你存的是单商品总价，这里改为 单价*新数量，建议单独存unitPrice字段避免计算误差：
      // price: existingItem.unitPrice * (existingItem.quantity + 1)
      // 如果你payload里传的是本次要增加的数量，就把+1改成+action.payload.quantity
    }
    return {
      ...state,
      cart: updatedCart
    }
  } else {
    // 商品不存在，新增条目，默认数量为1
    const newItem = {
      ...action.payload,
      quantity: action.payload.quantity || 1,
      // 建议新增unitPrice字段存单价，方便后续计算：
      // unitPrice: action.payload.price
    }
    return {
      ...state,
      cart: [...state.cart, newItem]
    }
  }

第二步：可选优化（Cart组件告警修复） #

你当前Cart组件有两处可优化的点，避免运行时报错：

• 你自定义的removeFromCart方法没有实际调用，可以直接删除冗余代码
• table标签的class属性要改为className，React中class为保留关键字，直接写class会触发属性告警

注意事项 #

• 确保所有商品的id是唯一标识，不要出现不同商品同ID的情况
• 如果你的addToCart逻辑支持单次添加多个商品，只需要把上面逻辑里的数量+1改为加传入的数量参数即可

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