不重新分配，链接规则，反应，打字记录

Question

我的林特在欺负我。

我创建了一个函数，将任务completed设置为以id为参数的!completed。

数据如下：

const lists = [
    {
      id: 'todo-3',
      name: 'Example 3',
      tasks: [{ name: 'task', completed: true, id: "Un" },{ name: 'task2', completed: true, id: "Deux" },{ name: 'task3', completed: true, id: "Trois" }]
    }
    {
      id: 'todo-4',
      name: 'Example 5',
      tasks: [{ name: 'task', completed: true, id: "Un" },{ name: 'task2', completed: true, id: "Deux" },{ name: 'task3', completed: true, id: "Trois" }]
    }
  ]

一开始，我做了一个这样的功能，它的工作，但林特不喜欢它。

  const toggleTask = (listId: string, taskId: string) => {
    const newListsToggled = lists.map((listItem) => {
      if (listItem.id === listId) {
        listItem.tasks.map((task) => {
          if (task.id === taskId) {
            task.completed = !task.completed;
          }
          return task;
        });
      }
      return listItem;
    });

    
  };

"task.completed = !task.completed“这个部分给了我不param重新分配错误，所以我尝试了另一个函数：

  const toggleTask = (listId: string, taskId: string) => {
    const newListsToggled = lists.map((listItem) => {
      if (listItem.id === listId) {
       return  listItem.tasks.map((task) => {
         if (task.id === taskId) {
            return {...task, completed: !task.completed}
            }
          return task;
          }
        );
      }
      return listItem;
    });
   
   console.log('testtoggle',newListsToggled)
  };

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

这个数组不返回整个数组，lists.name和lists.id部件就消失了。

没有绕过链接，有什么办法解决这个功能吗？

Answer 1

--这一次没有返回整个数组，lists.name和lists.id部分消失了

为了解决这个问题，您可以使用与任务相同的对象扩展技巧，而不是返回return listItem.tasks.map(...)：

if (listItem.id === listId) {
  return {
    ...listItem,
    tasks: listItem.tasks.map(...)
  }
}

Answer 2

这个警告是由以下事实触发的:在您的.map(task => ... )中，您修改了task (然后返回它)。使用map的方式对输入集合具有的副作用。它可能是故意的，也可能是无关紧要的，但它仍在发生。

.map()的目的通常是为每个输入对象/值生成一个新的结果对象/值。您应该(几乎)永远不要更改输入值，这就是您要做的，您应该只生成输出值。

如果您实际上想修改输入值，最好使用.forEach：

if (listItem.id === listId) {
   listItem.tasks.forEach((task) => {
      if (task.id === taskId)
         task.completed = !task.completed;
   }
}
return listItem;

这可以与.filter而不是if结合使用。

if (listItem.id === listId) {
   listItem.tasks
      .filter(task => task.id === taskId)
      .forEach(task => task.completed = !task.completed);
}
return listItem;

或者，如果您知道没有超过一个匹配任务，那么您可以使用.find

if (listItem.id === listId) {
   var task = listItem.tasks.find(task.id === taskId);
   if (task) task.completed = !task.completed;
}
return listItem;