删除react中的任务crud

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]
}
});

}

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)]
}
});