reactjs - 在反应中删除任务杂物

Question

我设法删除了任务（您可以在 console.log 中看到它），但我不知道如何呈现结果。我真的很感谢你的帮助。链接 CodeSanbox：https ://codesandbox.io/s/trello-task-forked-2xsh8?file=/src/App.js

const addItem = (e) => {
  e.preventDefault();
  const item = { id: uuidv4(), content: text };
  const requestedColumnId = Object.entries(columns).find(
    (i) => i[1].name === "Requested"
  )[0];
  const column = columns[requestedColumnId];

  setColumns({
    ...columns,
    [requestedColumnId]: {
      ...column,
      items: [...column.items, item]
    }
  });
  setText("");
};

const deleteItem = id => {
  
  const requestedColumnId = Object.entries(columns).find(
    (i) => i[1].name === "Requested"
  )[0];
  const column = columns[requestedColumnId];

  const arrFiltered = column.items.filter(item => item.id !== id)
  
  console.log('arrFiltered', arrFiltered)

  setColumns({
    ...columns,
    [requestedColumnId]: {
      ...column,
      items: [...column.items]
    }
  });
  
}

标签： reactjs

Answer 1

这是一个直接的解决方案。你做的一切都是正确的，但你错过了一些东西。只需将您的删除功能更新为以下

  const deleteItem = (id) => {
    const requestedColumnId = Object.entries(columns).find(
      (i) => i[1].name === "Requested"
    )[0];
    const column = columns[requestedColumnId];

    setColumns({
      ...columns,
      [requestedColumnId]: {
        ...column,
        items: [...column.items.filter((item) => item.id !== id)]
      }
    });
  };

您的错误是您在删除时过滤了数组。但是您没有更新主要项目。所以我通过将数组过滤器添加到主要项目并删除您的过滤器来解决它。像这样。

setColumns({
      ...columns,
      [requestedColumnId]: {
        ...column,
        items: [...column.items.filter((item) => item.id !== id)]
      }
    });