React JS中如何根据选中ID删除对象数组内的对应元素？

现有代码的问题 #

• filter 方法默认返回新数组，不会修改原数组。你把每次过滤的结果存在了临时变量res中，但没有更新tempLibrosData的指向，所以打印时永远是初始的数组内容
• 不需要遍历选中ID逐个执行过滤，单次过滤操作即可筛选出所有未选中的项，逻辑更简洁，执行效率也更高
• 数组属于引用类型，你直接写let tempLibrosData = librosData时，两个变量指向的是内存中的同一个数组，修改任意一个都会影响另一个。如果要做和原数据隔离的临时副本，建议先做浅拷贝。

修复后的实现代码 #

初始化逻辑

let librosData = data[0].data
// 扩展运算符做浅拷贝，临时数组和原数组完全隔离
let tempLibrosData = [...librosData];

删除操作逻辑

onClick={() => {
  const selectedIDs = new Set(selectionModel);
  // 直接保留所有未被选中的项，赋值给临时数组
  tempLibrosData = tempLibrosData.filter(item => !selectedIDs.has(item.id))
  // 此时打印的就是删除选中项后的结果
  console.log(tempLibrosData)
}}

React场景补充

如果你的tempLibrosData是React组件的状态变量，不要直接赋值修改，要调用状态更新方法触发视图刷新：

onClick={() => {
  const selectedIDs = new Set(selectionModel);
  setTempLibrosData(prev => prev.filter(item => !selectedIDs.has(item.id)))
}}

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