Question

如果已添加的产品再次添加到购物车，则仅购物车编号应增加，但该功能会将数据追加到列表，并且该产品在购物车视图中重复。如何确保检查产品是否已存在，然后仅增加或减少计数。下面是更新产品的代码

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


const cartItems = (state = initialState, action) => {
    switch(action.type) {
        case 'ADD_TO_CART':
            return {
                ...state,
                cart: [action.payload, ...state.cart],
                total: state.total + 1
            }
            // return [...state,action.payload]
        case 'REMOVE_FROM_CART' :
            return state.filter(cartItems => cartItems.id !== action.payload.id)
    }
    return state
}

数据中的单个项目就像

{key:'1', type:"EARRINGS", pic:require('../../assets/earring.jpg'),price:"200"}

Answer 1

我认为这会起作用。

case UPDATE_CART:
            let receivedItem = action.payload
            let itemList = state.cart
            let stepToUpdate = itemList.findIndex(el => el.id === receivedItem.id);
            itemList[stepToUpdate] = { ... itemList[stepToUpdate], key: receivedItem };
            return { ...state, cart: itemList }

'id'是唯一可以更新购物车中存在的特定物品的东西。它可以是产品ID或其他ID。

itemList.findIndex(el => el.id === receivedItem.id);

Answer 2

如果您要为项目使用相同的键，则可以执行以下操作

     case 'ADD_TO_CART':
       {
           const updatedCart = [...state.cart];
           const item = updatedCart.find(x=>x.key===action.payload.key);
           if(item)
           {
            item.count++;
           }
           else{
             updatedCart.push(action.payload);
           }
            return {
                ...state,
                cart: updatedCart,
                total: state.total + 1
            }
       }

逻辑将搜索数组中的项并增加计数或向数组中添加新项。

Answer 3

有多种方法可以实现这一目标。如果您知道添加了产品，则可以对INCREMENT / DECREMENT创建操作（例如：在购物车摘要中）。

如果您不知道是否添加了产品，也可以将此行为放入ADD_TO_CART操作中：

case "ADD_TO_CART": {
   const isProductAdded = state.cart.find(
     item => action.payload.id === item.id
   );
   return {
     ...state,
     cart: isProductAdded
       ? state.cart.map(item => {
           if (item.id === action.payload.id) {
             item.qty++;
           }
           return item;
         })
       : [action.payload, ...state.cart],
     total: state.total + 1
   };
}

更新购物车商品编号，而不是附加新商品

3 个答案: