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内容已被删除。

Answer 2

很难猜到;

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

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