React+TypeScript中如何编写符合no-param-reassign规则的任务状态切换函数

问题原因 #

修改后的代码匹配到对应listId时，直接将listItem替换为listItem.tasks.map返回的任务数组，丢弃了原列表对象的id、name等字段，最终导致字段丢失。

修复代码 #

遵循不可变更新原则，匹配到目标列表时返回新的列表对象，保留原列表所有属性，仅替换tasks字段为处理后的新任务数组即可，完全符合no-param-reassign的linter规则：

const toggleTask = (listId: string, taskId: string) => {
  const newListsToggled = lists.map((listItem) => {
    if (listItem.id !== listId) return listItem;
    // 保留列表原有字段，仅更新tasks数组
    return {
      ...listItem,
      tasks: listItem.tasks.map((task) => {
        if (task.id !== taskId) return task;
        return { ...task, completed: !task.completed };
      })
    };
  });

  console.log('testtoggle', newListsToggled);
  return newListsToggled;
};

toggleTask('todo-3','Deux');

说明 #

该实现全程没有修改任何入参、原数组或原对象的属性，不会触发linter报错，同时完整保留了所有原有字段，仅更新了目标任务的completed状态。

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