從購物車反應 js 中刪除項目

Question

在我將商品添加到購物車后，我致力於在我的 React js 項目中向購物車添加/刪除商品我添加了“-”和“+”按鈕，點擊這些按鈕應該減少/增加商品數量。 我已經設法添加到購物車，增加工作量，但我無法弄清楚當數量變為 0 時如何從購物車中刪除商品。這是我目前的代碼：

const [items, setItems] = useState([]);

const handleDecrease = (id) => {
    setItems((prevState) =>
      prevState.map(
        (item) =>
          item.id === id
            ? item.qty !== 1
              ? { ...item, qty: item.qty - 1 }
              : item.id !== id
            : item // !id
      )
    );
  };

{items?.map((item) => {
            return (
              <div
                key={item.id}
              >
                <div onClick={() => handleDecrease(item.id)}>-</div>
                <div>{item.title}</div>
                <div> ${item.price * item.qty}</div>
                <div>{item.qty}</div>
              
              </div>
            );
          })}

在我的 handleDecrease function 中，我檢查項目數量是否為，==1； 然后我將數量減 1，如果數量為 1 並且再次單擊“-”，我想從 items 數組中完全刪除該項目，但我的代碼只向 items 數組添加false 。 我怎樣才能刪除該項目？

Answer 1

所以你想要的是當用戶點擊減少時：

如果（當前）項目 object 屬性數量的值大於一，則將（當前）項目 object 屬性數量的值減一。 否則一起刪除項目 object 或者更好的是刪除項目 object，其 id 屬性值與項目數組中的（當前）項目對象屬性 id 的值相匹配。

Answer 2

有多種方法可以解決這個問題，但最簡單的是使用幫助數組：

const handleDecrease = (id) => {
  const newItems = [];

  items.map((item) => {
    if (item.id === id) {
      item.qty !== 1 && newItems.push({ ...item, qty: item.qty - 1 });
    } else {
      newItems.push(item);
    }
  });

  setItems(newItems);
};

Answer 3

除了使用 map 之外，您還可以使用 filter 方法。 這樣您就可以將 map 邏輯簡化為僅減少數量，然后運行一個過濾器，該過濾器將查找數量為 0 的任何項目並將其從數組中刪除。 您可以像這樣將它們鏈接在一起。

 const handleDecrease = (id) => {
            setItems((prevState) =>
                prevState.map(item => item.id === id ? 
                   ({...item, qty: item.qty - 1}) 
                : item
).filter(item => {
              return item.id === id ?
                       item.qty > 0
                     : true
                    }
                )
            )
            ;
        };

Answer 4

const handleDecrease = (id) => {
  setItems((prevState) => {
    const updatedState = { ...prevState };
    const indexOf = updatedState.findIndex((elm) => elm.id === id);
    if (indexOf > -1) {
      updatedState[indexOf].qty > 0
        ? (updatedState[indexOf].qty -= 1)
        : updatedState.splice(indexOf, 1);
    }
    return updatedState;
  });
};