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

Question

我有一个数组状态，其中填充了称为项目的对象:

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

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

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

当我将元素打印到函数之外的控制台时，它起作用了，但是该项目没有正确呈现。它仅从 jsx 中删除数组的最后一个元素，但 items 数组具有正确的值。我在某个地方读到，react 只浅层检查状态的变化，所以它不检查它正在删除的对象的内容。但是，我不确定为什么它会在控制台中显示 items 具有正确的值，但组件不会呈现正确的数据。 (相反，它呈现相同的数据，除了 items 中的最后一个元素)。

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

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

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

Answer 1

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

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

解决方案

为数组中的每个元素使用唯一键。 react可以看到的id之类的东西已经被删除了。