React中使用filter()无法删除对应div元素的问题求助

核心问题 #

你的删除功能失效是因为deleteTask函数里的过滤条件逻辑错误：你直接将todo对象和传入的taskID（数字类型）做对比，两者永远不可能相等，导致filter无法筛选出要删除的项。

修复后的代码 #

修改deleteTask函数，改为对比todo对象的id属性和传入的taskID：

//delete task
function deleteTask(taskID){
    setTodos(oldTodos =>  oldTodos.filter(todo => todo.id !== taskID))
}

额外优化建议 #

当前用oldTodos.length生成id存在隐患：当删除列表中间的任务后，新添加的任务会和已有任务的id重复（比如删除id=1的任务后，新增任务的id会变成2，和原本第三个任务的id一致）。可以改用时间戳生成唯一id，避免冲突：

// 修改createTodo里的id生成逻辑
setTodos(oldTodos => {
  return [...oldTodos, {"name":task, "id": Date.now()}] 
})

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