React Redux：购物车商品数量增减功能异常及实现需求

核心问题分析 #

1. Reducer中INCREMENT_PRODUCT逻辑错误：
   当前代码通过map直接返回item.inCart + action.payload，会将cartProducts从对象数组变为数字数组，彻底破坏数据结构，导致组件无法读取商品的name、img等属性。
2. 未指定目标商品：
   调用dispatch时仅传递增量值，未告知Reducer要修改哪个商品，会导致所有购物车商品数量同时变化。
3. 缺少DECREMENT_PRODUCT的处理逻辑：
   组件中有减号按钮，但无对应的Reducer逻辑和函数实现。
4. 组件调用增减函数时未传商品ID：
   无法定位到需要修改的具体商品。

步骤1：修正Reducer逻辑 #

更新reducer，修复INCREMENT_PRODUCT并添加DECREMENT_PRODUCT处理，确保只修改目标商品数量且保持数据结构不变：

const reducer = (state = defaultState, action) => {
   switch(action.type) {
      case "ADD_PRODUCTS":
         // 避免重复添加商品，已存在则直接增加数量
         const exists = state.cartProducts.find(item => item.id === action.payload.id);
         if (exists) {
            return {
               ...state,
               cartProducts: state.cartProducts.map(item => 
                  item.id === action.payload.id 
                     ? {...item, inCart: item.inCart + 1} 
                     : item
               )
            };
         }
         return {...state, cartProducts: [...state.cartProducts, {...action.payload, inCart: 1}]};

      case "REMOVE_FROM_CART":
         return {...state, cartProducts: state.cartProducts.filter((item) => item.id !== action.payload)}

      case "INCREMENT_PRODUCT":
         return {
            ...state,
            cartProducts: state.cartProducts.map(item => 
               item.id === action.payload 
                  ? {...item, inCart: item.inCart + 1} 
                  : item
            )
         };

      case "DECREMENT_PRODUCT":
         return {
            ...state,
            cartProducts: state.cartProducts.map(item => {
               if (item.id === action.payload) {
                  // 数量为1时，点击减号直接移除商品
                  if (item.inCart === 1) return null;
                  return {...item, inCart: item.inCart - 1};
               }
               return item;
            }).filter(item => item !== null)
         };

      default:
        return state;
   }
};

步骤2：修正组件中的增减函数 #

新增decrementProduct函数，并修改两个函数传递目标商品ID：

function incrementProduct(productId) {
   dispatch({type: "INCREMENT_PRODUCT", payload: productId})
}

function decrementProduct(productId) {
   dispatch({type: "DECREMENT_PRODUCT", payload: productId})
}

步骤3：更新Cart组件的按钮调用 #

在渲染购物车项时，将当前商品的id传入增减函数：

return(
    <div className="cart">
        {cartProducts.length > 0 ? cartProducts.map(item =>
            <div className="cartItem" key={item.id}>
                <img src={item.img} alt={item.name} />
                <div className="cartItemInfo">
                    <div className="itemInfo">
                        <h3>{item.name}</h3>
                        <h3>{item.price}$</h3>
                    </div>
                    <div className="quantity">
                        <button onClick={() => decrementProduct(item.id)}>-</button>
                        <p>{item.inCart}</p>
                        <button onClick={() => incrementProduct(item.id)}>+</button>
                    </div>
                    <div className="itemDelete">
                        <button onClick={() => removeItem(item.id)}><img src={require('../images/icons/trashCanIcon.png')} alt="删除商品" /></button>
                    </div>
                </div>
            </div>
        ): <h1>Cart is empty</h1>}
        {cartProducts.length > 0 ? <h1 className="totalPrice">Total Price: {totalPrice}$</h1> : <></>}
    </div>
)

额外优化说明 #

原ADD_PRODUCTS逻辑会重复添加相同商品，现在加入判断：若商品已在购物车，则直接增加数量，无需重复添加。

核心原则提醒 #

• Redux不可变性：所有state修改必须返回新对象/数组，不能直接修改原state属性，这是Redux的核心要求。
• 精准定位：通过商品ID定位目标项，确保操作只作用于指定商品。
• 边界处理：在DECREMENT_PRODUCT中处理数量为1的场景，避免出现无效的0数量商品。

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