React - 状态数组删除数组中的最后一项而不是指定的索引

Question

我有一个数组状态，其中填充了称为 items 的对象：

    const [items, setItems] = useState([{name: "", toppings: []}])

但是，当我尝试使用此函数删除指定索引时：

const removeItem = (index) => {
    setItems(items.filter((item, i) => i !== index))
    areItemsCompleted()
}

当我将元素打印到函数外部的控制台时，它可以工作，但是该项目无法正确渲染。它仅从 jsx 中删除数组的最后一个元素，但items数组具有正确的值。我在某处读到，反应仅浅层检查状态变化，因此它不会检查正在删除的对象的内容。但是，我不确定为什么它显示在控制台中items具有正确的值，但组件没有呈现正确的数据。（相反，除了 中的最后一个元素之外，它呈现相同的数据items）。

我尝试了多种从数组中删除元素的方法，例如

const removeItem = (index) => {
    let arr = [...items]
    arr.splice(index, 1)
    setItems(arr)
    areItemsCompleted()
}

如何从充满对象的数组中删除元素并呈现正确的数据？

Answer 1

所以我使用数组索引作为key组件的支柱，但是在删除数组中的项目时这不起作用。

React 不知道要删除哪个键，因为即使删除该特定元素后，数组索引仍然存在。

解决方案

为数组中的每个元素使用唯一的键。诸如id“react can see”之类的内容已被删除。

Answer 2

很难猜测；

检查一下，可能是您稍后在某处重新设置项目；

加函数形式更安全： setItems(lastItems=>lastItems.filter((item, i) => i !== index))