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

Question

我创建了一个购物车推送插入项目，逻辑是这样的：

我有一个数组：

`let cartItems = [];`

包含具有已定义属性的产品对象：

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

我想在每次将新项目推送到 cartItems数组。但是，如果新项目的 productSize 的值不同于现有项目的 productSize 属性，我想将这个新项目推到 cartItems 数组 quantity: 1 而不是像我之前描述的那样增加`数量。

但是 id 属性的问题出现了，因为两个产品的 id 相同。当我尝试删除或更新 cartItems 数组时，这会引发错误，因为我使用产品的 id 属性来查找和映射 cartItems 数组。请帮忙？

我尝试为每个产品创建一个 temporaryId 属性设置为随机数，但我不知道这个解决方案如何工作。这是我写的代码：

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

我认为一种方法是修改您的 existingCartItem 检查。不是查找具有 id 的项目，而是查找与 id AND productSize.

匹配的项目的索引

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

这样，如果索引 > -1，您就知道需要修改的项目的索引，否则您就知道需要将项目添加到数组中。

因此，解决方案如下所示：

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;
};

希望对您有所帮助！

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

Add item to cart if size property is different but the ID keys are the same

javascript

arrays

shopping-cart

cart

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

Add item to cart if size property is different but the ID keys are the same

javascript

arrays

shopping-cart

cart

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