React hooks - 從數組中刪除多個項目並更新狀態

Question

如何刪除數組的多個項目並設置狀態？ 我從復選框中選擇了多個項目。 這是選定的項目 [5, 4, 3] 我想根據 id 刪除數組中的所有項目並更新狀態。 這是我的代碼。

const [products, setProducts] = useState();

 const DeleteProducts = () => {
  const selectedItems = [5, 4, 3];

    selectedItems.forEach(function(p) {
      setProducts(products.filter(prd => prd.id !== p));
    });
}

它一次只刪除一項，但我選擇了 3 項。 如何刪除 3 個選定的項目和產品狀態？ 謝謝

Answer 1

您正在調用 setProducts 循環迭代。 您必須在過濾它們后調用 setProducts 以便它只觸發一次狀態更改

const [products, setProducts] = useState();

 const DeleteProducts = () => {
  const selectedItems = [5, 4, 3];
  let newProducts;
    selectedItems.forEach(function(p) {
      newProducts = products.filter(prd => prd.id !== p);
    });
  setProducts(newProducts);
}

更好的是，您可以像這樣更快地過濾它而無需循環

const DeleteProducts = () => {
  const selectedItems = [5, 4, 3];
  const newProducts = products.filter(prd => selectedItems.indexOf(prd.id) >= 0);
  setProducts(newProducts);
}