如果 size 属性不同但 ID 键相同，则将商品添加到购物车

Question

I created a cart push insert items into it, the logic is this:

I have an array:

`let cartItems = [];`

To contain Product objects with defined properties:

{
"id": 10,
"name": "Nike Hoodie 1",
 ...
}

I would like to increase an item's quantity property and set size property (if the item exists in the array) any time I push a new item to the cartItems array. However, if the value of productSize of the new item is different from the existing item's productSize property, I would like to push this new item to the cartItems array with quantity: 1 rather than increasing the `quantity as I described earlier.

But the problem with id property appears because the id is the same for both products. And when I try to remove or update cartItems array, this would throw an error because I use the id property of the products to find and map the cartItems array. Please help?

I have tried to create a temporaryId property set to a random number for each product but I don't know how work this solution. This is the code I wrote:

export const addItemToCart = (cartItems, cartItemToAdd, selectedSize) => {
  const existingCartItem = cartItems.find(
    (cartItem) => cartItem.id === cartItemToAdd.id
  );
  if (existingCartItem) {
    if (existingCartItem.productSize === selectedSize) {
      console.log('product sizes are the same');
      return cartItems.map((cartItem) =>
        cartItem.id === cartItemToAdd.id
          ? {
              ...cartItem,
              quantity: cartItem.quantity + 1,
            }
          : cartItem
      );
    } else {
      console.log('product sizes are not the same');
      return cartItems.map((cartItem) =>
        cartItem.id === cartItemToAdd.id
          ? {
              ...cartItem,
              quantity: cartItem.quantity + 1,
              productSize: selectedSize,
            }
          : cartItem
      );
    }
  }
  let randomId = Math.floor(1000 + Math.random() * 9000);
  return [
    ...cartItems,
    {
      ...cartItemToAdd,
      tempId: randomId,
      quantity: 1,
      productSize: selectedSize,
    },
  ];
};

Answer 1

I think one way to do it is to modify your existingCartItem check. Instead of finding the item with that id , find the index of the item that matches id AND productSize .

 const existingCartItemIndex = cartItems.findIndex((cartItem) => {
     return cartItem.id === cartItemToAdd.id && cartItem.productSize === selectedSize;
  });
});

That way, if the index is > -1 you know the index of the item you need to modify, otherwise you know you need to add the item to the array.

So, a solution would look like this:

export const addItemToCart = (cartItems, cartItemToAdd, selectedSize) => {
  const existingCartItemIndex = cartItems.findIndex((cartItem) => {
     return cartItem.id === cartItemToAdd.id && cartItem.productSize === selectedSize;
  });

  if (existingCartItemIndex > -1) {
     cartItems[existingCartItemIndex].quantity = cartItems[existingCartItemIndex].quantity + 1;
  } else {
    cartItems.push({ 
      ...cartItemToAdd, 
      quantity: 1, 
      productSize: selectedSize
  }

  return cartItems;
};

Hope this helps!