React Hooks：如何从数组中移除多个对象并更新状态

嘿，我来帮你搞定这个问题！你的代码现在每次只能删掉一个项，核心原因是React的setState是异步的，而且你在forEach循环里多次调用setProducts时，每次引用的products都是初始的状态值——相当于每次删除都是基于原始数组操作，最后只有最后一次的删除结果会被保留，前面的操作都被覆盖了。

正确的解决方法：一次性过滤所有需删除的项 #

不需要循环调用setProducts，我们可以用一次filter操作就把所有选中id的元素都过滤掉，同时使用函数式更新来确保基于最新的状态进行修改：

const [products, setProducts] = useState(/* 这里要填你的初始数组，比如[]或者接口返回的产品列表 */);

const DeleteProducts = () => {
  const selectedItems = [5, 4, 3];
  // 一次性过滤掉所有选中id的元素
  setProducts(prevProducts => prevProducts.filter(prd => !selectedItems.includes(prd.id)));
}

为什么这样有效？ #

• filter会遍历整个prevProducts数组，只保留那些id不在selectedItems里的元素，一次操作就完成了批量删除。
• 使用prevProducts（函数式更新）是因为当状态更新依赖于之前的状态时，这种方式能确保我们拿到的是最新的状态值，避免异步更新带来的状态不一致问题。

性能优化（可选） #

如果你的products数组很大，selectedItems也比较多的话，可以把selectedItems转换成Set，因为Set.has()的时间复杂度是O(1)，比数组的includes()（O(n)）效率更高：

const DeleteProducts = () => {
  const selectedIds = new Set([5, 4, 3]);
  setProducts(prevProducts => prevProducts.filter(prd => !selectedIds.has(prd.id)));
}

这样修改后，点击删除按钮就能一次性移除所有选中id的产品，状态也会正确更新啦！

内容的提问来源于stack exchange，提问作者PNG