如何在Redux Toolkit中实现电商购物车商品状态更新？

你的代码存在几个核心问题，导致逻辑无法正常运行：

• 误用map方法：map会遍历所有商品，每次遇到不匹配的id就执行push，导致同一商品被重复添加多次
• 未处理availableQuantity的递减逻辑
• 直接修改原state的方式逻辑本身存在错误

正确的实现代码 #

在你的slice的reducers中，替换掉原有错误的map逻辑，改用以下代码：

// 先查找购物车中是否已存在该商品
const existingProduct = state.find(product => product.id === action.payload.id);

if (existingProduct) {
  // 商品已存在：更新数量
  existingProduct.cartQuantity += 1;
  existingProduct.availableQuantity -= 1;
} else {
  // 商品不存在：添加到购物车，初始化数量并减少库存
  state.push({
    ...action.payload,
    cartQuantity: 1,
    availableQuantity: action.payload.availableQuantity - 1
  });
}

代码说明 #

• 用find方法一次性定位目标商品，避免遍历所有商品时重复执行添加操作
• 已存在的商品：直接修改其cartQuantity和availableQuantity（Redux Toolkit的Immer库会帮我们处理不可变更新）
• 不存在的商品：复制原商品对象，设置cartQuantity为1，同时将availableQuantity减1后加入购物车

这样就能完全实现你需要的逻辑：点击添加按钮时，判断商品是否在购物车，已存在则增加购物车数量并减少库存，不存在则添加并更新对应属性。

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