如何在React中修改数组状态的指定项？TodoList全选功能实现问题

问题原因 #

你写的CompleteAll函数存在2处逻辑错误：

• map遍历的回调里直接返回了item.isDone===true的布尔判断结果，直接把每个任务项替换成了布尔值，丢失了task等原有属性
• 最终给SetTaskList的返回值是{list: [...]}格式的对象，而taskList本身是数组类型，结构不匹配会导致后续渲染逻辑报错

修改后的代码 #

const CompleteAll = (e) =>{
  SetTaskList((prev) => {
    // 遍历所有任务，保留原有属性的同时把isDone设为true
    return prev.map((item) => ({...item, isDone: true}))
  })
}

修改说明 #

• 用展开运算符...item保留每个任务项的原有字段，只覆盖isDone属性为true，不会丢失任务内容
• 直接返回map后的数组，和taskList原本的数组结构保持一致，不会影响后续的列表渲染逻辑

内容的提问来源于stack exchange，提问作者Mehmet Can BOZ