将不同尺寸和价格的相同产品添加到购物车

Question

我可以将不同的产品添加为单独的数组，如果添加相同的产品，我还可以增加和减少数量。但我想添加不同尺寸的相同产品。下面是我的代码..请帮忙..！

上下文屏幕：

 const initialState = {
  
  products: ProductData,
    cart: [],
  };
 
const reducer = (state = initialState, action)=>{
    switch(action.type){
        case 'ADD':
            const item = state.products.find(
                (product) => product.id === action.payload.id
              );
              // Check if Item is in cart already
              const inCart = state.cart.find((item) =>
                item.id === action.payload.id ? true : false
              );
        
              return {
                ...state,
                cart: inCart
                  ? state.cart.map((item) =>
                      item.id === action.payload.id
                        ? { ...item, qty: item.qty + 1 }
                        : item
                    )
                  : [...state.cart, { ...item, qty: 1 }],
              };
            
        case 'DELETE':
        return {
            ...state,
            cart: state.cart.filter((item) => item.id !== action.payload.id),
          };
       
        case 'INCREASE':
               const tempCart = state.cart.map((cartItem) => {
                if (cartItem.id === action.payLoad.id) {
                  return { ...cartItem, qty: cartItem.qty + 1 };
                }
                return cartItem;
              });
              return { ...state, cart: tempCart };
        
        case 'DECREASE':
                const temp = state.cart.map((cartItem) => {
                    if (cartItem.id === action.payLoad.id) {
                      return { ...cartItem, qty: cartItem.qty - 1 };
                    }
                 return cartItem;
                  })
                  .filter((cartItem) => cartItem.qty !== 0);
                return { ...state, cart: temp };
              
        case 'CLEAR':
              return {cart :[]}
           
        default:
            throw new Error(`unknow action.${action.type}`)
    }

}

产品数据

 export const ProductData = [
{
  id: 'C1',
  name:'Coffee',
  categories: [1],
  price: 15.00,
  prices: [
    {size: 'S', price: '1.38', currency: '$'},
    {size: 'M', price: '3.15', currency: '$'},
    {size: 'L', price: '4.29', currency: '$'},
  ],
 
{
  id: 'C2',
  name: "Coffee",
  icon:icons.coffee_1,
  categories: [1,2],
  price: 15.00,
  prices: [
    {size: 'S', price: '1.38', currency: '$'},
    {size: 'M', price: '3.15', currency: '$'},
    {size: 'L', price: '4.29', currency: '$'},
  ],

} ]

我可以添加、删除、增加和减少，但我想将不同规格的相同产品添加到购物车。非常感谢您的帮助。

Answer 1

将您的 action.payload 从 {id:''} 修改为 {id:'',size:''}。

case 'ADD':
  const newItem = { ...action.payload, qty: 1 };
  const existingItemIndex = state.cart.findIndex(
    (item) => item.id === action.payload.id && item.size === action.payload.size
  );

  if (existingItemIndex !== -1) {
    // Product with the same specifications is already in the cart, increment quantity
    const updatedCart = state.cart.map((item, index) =>
      index === existingItemIndex ? { ...item, qty: item.qty + 1 } : item
    );

    return { ...state, cart: updatedCart };
  } else {
    // Product with different specifications or not in the cart, add a new item
    return { ...state, cart: [...state.cart, newItem] };
  }