React中按字段值删除对象数组元素时map返回undefined的问题处理

你当前的实现存在方法选型的本质问题：

• map方法的设计目标是对原数组的每一项做值映射，最终生成的新数组和原数组长度完全相等，天生不支持元素删除能力。
• 你写的回调函数中，匹配到待删除的id时没有显式返回内容，函数默认返回undefined。最终生成的新数组只会把目标位置的元素替换为undefined，并不会真正移除该位置、缩短数组长度，完全达不到删除任务的效果。

按id删除指定任务的场景，应当使用filter方法：该方法会遍历原数组，将所有满足回调函数返回值为true的元素收集生成新数组，新数组的长度会自动匹配实际保留的元素数量，完全适配删除、筛选类需求。

可直接运行的代码示例 #

删除id为123的任务时，按如下逻辑编写即可：

// 过滤出所有id不等于123的任务，生成新数组
const remainingTasks = this.state.tasks.filter(task => task.id !== 123)
// 更新组件状态
this.setState({
  tasks: remainingTasks
})

附带的现存问题修正 #

你之前实现追加新任务的写法存在状态结构错误：setState需要传入与现有state结构匹配的对象，不能直接传入数组。正确的追加写法为：

this.setState({
  tasks: [...this.state.tasks, newTask]
})

避免把原本存储tasks字段的state整体覆盖为数组，引发后续渲染读取异常。

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