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

IT技术 javascript reactjs react-hooks
2021-05-01 07:56:50

我在删除待办事项应用程序中的子任务时遇到问题。我想从“域”中删除选定的子任务，而 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个回答

有各种各样的问题：

  • handleRemoveSubtasksel.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
      })
    );
  };
其它你可能感兴趣的问题
上一篇如何在 REACT 的 Axios Post 请求中附加表单数据 下一篇react - 无效的钩子调用。未捕获的错误：缩小的 React 错误 #321