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

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

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

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

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

当我在函数外部将元素打印到控制台时，它会起作用，但是该项渲染不正确。它只从jsx中删除数组的最后一个元素，但

items

数组具有正确的值。我在某个地方读到，react只是粗略地检查状态的变化，所以它不检查它正在删除的对象的内容。但是，我不确定为什么控制台中会显示

项

具有正确的值，但组件没有呈现正确的数据。（而是呈现相同的数据，除了

项中的最后一个元素

）

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

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

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

很难猜测

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

另外，函数形式更安全：

---

setItems（lastItems=>lastItems.filter（（item，i）=>i！==index））

有可能以最小的问题获得一个工作沙盒演示吗？我认为这里发生的事情太多了，无法自动知道解决方案——也就是说，可能是

setItems（）

坏了，而

filter（）

工作正常？我不确定，但是沙盒会有帮助。听起来你正在使用数组索引作为映射JSX的

键。我刚刚检查了，我没有在其他地方重新设置状态，因为该方法中唯一的其他功能是更改不同的状态。我尝试了上面的代码，可惜没有成功。（它在控制台中提供了正确的输出，但没有仍然呈现组件）