Array.map运行机制是什么？批量删除选中项仅删除1条是什么原因？

问题根源 #

你代码的核心问题有3个：

• 循环内每次都从**未修改的原始librosData**出发做过滤，上一轮循环删除的结果完全没有保留，相当于每次循环都只是演示了「从原始数据删除1个id」的效果，最终等于只删除了最后一次循环的对应id
• tempLibrosData是循环内部的局部变量，循环结束后你没有把最终结果赋值给外部变量，也没有更新回localStorage，所有修改都是临时的、不会生效
• 用map做纯副作用的遍历操作不符合设计规范，且这个批量删除场景完全不需要循环，单次过滤就能实现需求

正确实现 #

你不需要遍历选中ID逐个删除，直接一次过滤保留未选中的条目即可：

// 1. 批量过滤出未选中的条目，直接完成批量删除
const updatedLibrosData = librosData.filter(item => !selectedIDs.has(item.id))

// 2. 把修改后的数据写回原数据集
data[0].data = updatedLibrosData

// 3. 持久化更新到localStorage（如果需要存储修改结果）
window.localStorage.setItem("verpedidos", JSON.stringify(data))

原有代码的错误验证 #

如果你一定要用逐个删除的写法验证问题，可以这么改（仅作错误演示验证，不推荐实际使用）：

// 先把原始数据赋值给外部的临时变量，不要在循环内重置
let tempLibrosData = [...librosData]
librosData.filter(x => selectedIDs.has(x.id)).forEach(x => {
  console.log(x.id)
  tempLibrosData = tempLibrosData.filter(e => e.id != x.id)
  console.log(tempLibrosData)
})
// 最后把最终结果赋值回原变量
librosData = tempLibrosData

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