React hooks - удаление нескольких элементов из массива и обновление состояния

Question

Как удалить несколько элементов массива и установить состояние? Я выбрал несколько пунктов из флажка. Это выбранный элемент [5, 4, 3] Я хочу удалить все элементы в массиве на основе идентификатора и обновить состояние. Это мой код.

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 итерацией l oop. Вы должны вызывать 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);
}