在React中删除包含其他特定id项的数组的问题

Question

我有一个数组，其中包含许多数组，其中包含{id和content}。

示例:[Array(1), Array(1), Array(1)].

我试图删除数组与ID参数。它删除Array的but状态。长度不会改变，因为我只删除数组的一个元素，而不是整个数组。

我要做的是delete () ->结果应该是

[[Array(1), Array(1)]

我有什么?[Array(0), Array(1), Array(1)]

有我想做的代码:

return (
<div>
<h1>{tasks.length}</h1>
{tasks.map((task) => {
return (<div>
{task.map((con) => {
return (<div>
<h3 className="hrandom">{con.content}
<button type="button" class="btn btn-danger" onClick={() => { deleted(con.id) }}>Delete</button></h3>
</div>
)
})}
</div>)
})
}
</div>)

和delete函数:

const deleted = (id) => {
Axios.delete('http://localhost:3001/api/delete/', { data: { id: id } }).then((res) => {
console.log(res.data)
});
const b = tasks.map((tod) => tod.filter((i) => i.id !== id ));
setTasks(b);
};

Answer 1

在您的map中，您正在从内部数组中删除项目，而不是外部数组本身。您可以在一行中完成此操作，但为了简单性和可读性，请在外部数组中添加第二个filter:

const b = tasks.map((tod) => tod.filter((i) => i.id !== id )).filter(arr => arr.length > 0);

这将以一种非常可读的方式删除所有已清空的内部数组。然而，注意到内部数组的长度总是1，您可以像这样清晰地解构它:

const b = tasks.filter(([{ id: inner }]) => inner !== id);

解构语法取内部数组第一个元素对象的id属性，并将其与id进行比较。

Answer 2

举个例子;而不是在map函数中使用filter——它仍然返回相同长度的数组，您应该使用filter函数直接过滤掉父数组:

const b = tasks.filter((tod) => tod.findIndex((i) => i.id === id ) < 0);

然而，如果只有一个数组条目将包含id，过滤器可能不是最好的选择，因为它将遍历整个tasks数组，即使id已经找到。在这种情况下，我建议首先找到包含id数组的元素的索引，然后使用array.splice将其从tasks数组中删除，如下所示:

const index = tasks.findIndex((tod) => tod.findIndex((i) => i.id === id ) > -1);
if (index > 0) {
tasks.splice(index, 1);
}