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