在使用 Antd 的 List 组件中,经常会遇到在删除某个元素时,总是删除第一个或最后一个元素的问题。这是因为在删除时,List 会根据元素的 key 值来确定删除位置,如果 key 值相同,那么就会删除第一个或最后一个。
要解决这个问题,有两种方法:
方法一:在渲染 List 组件时,为每个元素指定不同的 key 值。例如:
{data.map((item, index) => (
{item}
))}
这样,在删除元素时,就会按照其 key 值来确定删除位置,而不是按照顺序。
方法二:在使用 remove 方法时,传入要删除的元素的引用,而不是索引值。例如:
const handleDelete = (item) => {
setData((prevData) => prevData.filter((i) => i !== item));
};
{data.map((item) => (
{item}
))}
这样,在删除元素时,就会将其直接从数组中删除,而不需要根据 key 值来确定删除位置。