如何通过匹配数组内两个ID切换任务completedTask布尔值状态

问题核心错误点 #

1. Array.map()的回调需要为每一项返回处理后的元素，你现在的写法只有匹配到目标task时返回了一个布尔值，其余项没有返回内容，会导致生成的tasks数组里存在undefined，丢失原有所有字段。
2. 匹配到目标task时，你没有保留原有task的其他属性，只返回了completedTask的判断结果，不符合切换状态的需求。

修正后代码 #

const toggleTask = (listId: string, taskId: string) => {
  const listIndex = lists.findIndex((list)=>list.idl === listId);
  // 边界判断，避免找不到对应列表时报错
  if (listIndex === -1) return lists;
  const list = lists[listIndex];
  const newList = {
    ...list,
    tasks: list.tasks.map((task)=> {
      // 匹配到目标任务时，保留所有原有属性，仅反转完成状态
      if (taskId === task.taskId) {
        return {
          ...task,
          completedTask: !task.completedTask
        }
      }
      // 未匹配的任务直接返回原对象即可
      return task
    })
  }

  const newLists = [
    ...lists.slice(0,listIndex),
    newList,
    ...lists.slice(listIndex + 1),
  ]
  console.log('newLists2', newLists)
  // 状态更新场景直接返回该结果替换原数组即可
  return newLists
}

调用toggleTask("todo-1", "Un")即可得到你预期的输出结果。

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