添加到购物车逻辑答案

【问题标题】：Add to cart logic添加到购物车逻辑
【发布时间】：2021-07-23 08:14:00
【问题描述】：

我正在尝试编写添加到购物车的逻辑，用户可以在其中将商品添加到购物车，当商品已经在购物车中时，它的数量会增加，但代码中的某些内容不正确，我无法判断什么。问题是 for 循环，据说它检查列表中所有项目的 id，如果存在，增加它的数量，但看起来它只适用于添加的第一个项目，其余的只是推送到会话存储。希望你能帮忙。代码如下：

const addToCart = (data) => {
    let items = JSON.parse(sessionStorage.cartItems);

    if (items.length === 0) {
        data.qty = 1;
        items.push(data);
        sessionStorage.setItem('cartItems', JSON.stringify(items));
        console.log("first");
    } else {
        for (let i = 0; i < items.length; i++) {
            if (items[i]._id === data._id) {
                items[i].qty++;
                sessionStorage.setItem('cartItems', JSON.stringify(items));
                console.log("second");
                break;
            } else if (items[i]._id !== data._id) {
                data.qty = 1;
                items.push(data);
                sessionStorage.setItem('cartItems', JSON.stringify(items));
                console.log("third");
                break;
            }
        }
    }
}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

案例length === 0:

let found = false;
for (let i = 0; i < items.length; i++) {
    if (items[i]._id === data._id) {
        items[i].qty++;
        found=true;
        break;
     } 
}

if (found === false) {
    data.qty = 1;
    items.push(data);
}

sessionStorage.setItem('cartItems', JSON.stringify(items));

是的，您的代码中的问题是else if：您正在为数组中的每个项目添加数据项，其中 id 不是您的数据之一。

【讨论】：

【解决方案2】：

这是另一种没有 for 循环的方法：

  const addToCart = (data) => {
    // initialize items to empty array if empty
    let items = JSON.parse(sessionStorage.cartItems) || [];

    if (items.some((item) => item._id === data._id)) {
      // item is already in cart, increase qty for that item
      items = items.map((item) =>
        item._id === data._id ? { ...item, qty: item.qty + 1 } : item
      );
    } else {
      // new item, add to cart
      items = [...items, { ...data, qty: 1 }];
    }

    sessionStorage.setItem('cartItems', JSON.stringify(items));
  }

【讨论】：

【解决方案3】：

逻辑问题在于，您在“else if”条件下打破了“for”循环。因此，只有第一项与“数据”中的“_id”匹配时，您的逻辑才会起作用。

解决方案：从“for”循环的“else if”条件中删除“break”语句。

【讨论】：

它仍然重复列表中的项目。将新商品添加到购物车时，它的 console.logs: "first"。然后其他一切都是第三->第二。它只是成倍增加。
是的，这个逻辑中不需要“else if”语句。 @Taxel 已经回答了，

【解决方案4】：

解决此问题的逻辑似乎有点复杂，您的问题是，您实际上仅将data._id 与items[0]._id 进行比较，并在id 不匹配和中断时推送一个新项目，因此您永远不会结束检查任何其他元素的 id 并推送一个新元素

Taxel的回答会解决你的问题

这是另一个简单的逻辑，也可以解决您的问题，无需使用 for 循环

const addToCart = (data) => {
  let items = JSON.parse(sessionStorage.cartItems);
    
  let itemIndex = items.findIndex(e => e._id === data._id);
    
  if(itemIndex > -1) {
    // item exists
    items[itemIndex].qty++;
  }
  else {
    // item not found
    data.qty = 1;
    items.push(data);
  }
  sessionStorage.setItem('cartItems', JSON.stringify(items));
}

【讨论】：