使用钩子在React中删除子任务

时间:2020-01-14 20:02:49

标签: reactjs react-hooks

我在删除待办事项应用程序中的子任务时遇到问题。我想从“域”中删除选定的子任务,而handleRemoveSubtasks会一起删除所有子任务。

这是我的沙盒:https://codesandbox.io/s/weathered-paper-niyc3

删除子任务位于

const handleRemoveSubtasks = subtaskId => {
    useList(
      list.map(el => {
        console.log(el.tasks);
        console.log(subtaskId);
        console.log(el.tasks.filter(ele => ele.id !== subtaskId));
        return el.tasks.filter(ele => ele.id !== subtaskId);
      })
    );
  };

1 个答案:

答案 0 :(得分:2)

存在各种问题:

  • handleRemoveSubtasks尝试访问el.tasks,即使它不存在,也会引发错误。
  • handleRemoveSubtasks过滤器作为自己的el元素而不是el.tasks
  • 返回

检查以下代码:

  const handleRemoveSubtasks = subtaskId => {
    useList(
      list.map(el => {
        if (!el.tasks) return el // If no tasks, return the same element
        return {...el, tasks: el.tasks.filter(task => task.id !== subtaskId)} // if tasks, filter them by id
      })
    );
  };