如果 size 属性不同但 ID 键相同，则将项目添加到购物车答案

【问题标题】：Add item to cart if size property is different but the ID keys are the same如果 size 属性不同但 ID 键相同，则将项目添加到购物车
【发布时间】：2021-06-11 13:38:20
【问题描述】：

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

我有一个数组：

`let cartItems = [];`

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

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

每当我将新项目推送到cartItems 数组时，我想增加一个项目的quantity 属性并设置大小属性（如果该项目存在于数组中）。但是，如果新项目的productSize 的值与现有项目的productSize 属性不同，我想用quantity: 1 将这个新项目推送到cartItems 数组，而不是像我一样增加`数量前面已经介绍过了。

但出现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,
    },
  ];
};

【问题讨论】：

您可以使用const item = cartItems.find(item => item.id === searchId)。如果item 不为空，只需增加item.quantity。如果为 null，则推送一个新元素。
然后如果用户想要更改购物车商品的数量，您/他们将如何知道他们是否删除了大号与中号的商品？也许您确实需要以某种方式实际显示两者而不是增加数量
@ChrisG - 是的，但是当项目首先出现时，它没有 searchId 作为属性，我不能很好地理解你的想法。
@Kinglish - 如果我们添加的产品与购物车项目数组中的产品相同，但它的产品尺寸不同，我想将其作为新产品插入（单独）和不增加数量。
这只是示例代码。虽然我没有读到大小问题，但这只是意味着你必须修改 find 函数：item => item.id === cartItemToAdd.id && item.size === cartItemToAdd.size

标签： javascript arrays cart shopping-cart

【解决方案1】：

我认为一种方法是修改您的existingCartItem 支票。查找与 id 和 productSize 匹配的项目的索引，而不是查找具有该 id 的项目。

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

希望这会有所帮助！

【讨论】：