React.js, Array.filter 沒有過濾掉不符合條件的項目

Question

我正在處理 React 中的購物車，為了能夠刪除單個項目，我想將項目的 id 與數組中所有項目的 id 進行比較，這樣如果 id 相同，我可以從數組中過濾掉該項目。 但是過濾器方法似乎不起作用。 我錯過了什么嗎？

Function：

const deleteItem = () => {
    cartArray.map((e) => {
      console.log("I'm working");
      if (e.id != id) {
        setCartArray(cartArray.filter((e) => e.id !== id));
      }
    });
  };

調用 function 的組件：

const CartProduct = ({
  cartArray,
  setCartArray,
  imgUrl,
  nameUrl,
  priceUrl,
  id,
}) => {
  const shortenProductName = (name) => {
    if (name.length > 40) return name.slice(0, 40) + "...";
    else return name;
  };

  const deleteItem = () => {
    cartArray.map((e) => {
      console.log("I'm working");
      if (e.id != id) {
        setCartArray(cartArray.filter((e) => e.id !== id));
      }
    });
  };
  

  return (
    <div className="cart-product">
      <p></p>
      <img src={imgUrl} alt="product image" />
      <div className="name-price-container">
        <p>{shortenProductName(nameUrl)}</p>
        {/* <p>{nameUrl.slice(0, ) + "..."}</p> */}
        <h4>€ {priceUrl}</h4>
      </div>
      <DeleteIcon onClick={deleteItem} />
    </div>
  );
};

謝謝！

Answer 1

您可能應該刪除整個.map部分。 此外，將 id 傳遞給 function。

const deleteItem = id => {
   setCartArray(cartArray.filter(e => e.id !== id));
};

Answer 2

filter()方法創建一個新數組，其中包含所有通過測試的元素，因此您可以僅使用過濾器 function filter cartArray。

const deleteItem = () => {
   setCartArray(cartArray.filter(e => e.id !== id));
};

Answer 3

您不需要 map，我可能會簡化整個事情。 這是一個工作示例：https://codesandbox.io/s/wizardly-wilson-fxwje?file=/src/App.js

import React from "react";

export default function App() {
  const [cartArray, setCartArray] = React.useState([
    { id: 1, title: "first" },
    { id: 2, title: "second" },
    { id: 3, title: "third" }
  ]);

  const deleteItem = (e) => {
    setCartArray(
      cartArray.filter(
        (cartItem) => parseInt(e.target.value, 10) !== cartItem.id
      )
    );
  };

  return (
    <div className="App">
      <div>
        {cartArray.map((item) => {
          return (
            <button onClick={deleteItem} value={item.id}>
              {item.title}
            </button>
          );
        })}
      </div>
    </div>
  );
}