React.js 显示的值与父 state 不匹配并呈现 HTML

Question

我正在制作一个待办事项列表类型的应用程序来学习 React。 我有一个App组件，其中包含一个Todolist组件，其中包含ListItem组件。 每个ListItem组件都有一个标题和一个 boolean completed ，由一个复选框控制。

选中并完成的ListItem组件被排序到Todolist的底部。 检查项目时，我调用 function setItemCompleted() （从App的道具中传递）来更新App的 state 并重新渲染所有内容。

在setItemCompleted()中，我打印更新后的ListItem数组，它符合我的预期。 当 React 重新渲染所有内容并打开 Chrome 检查器以检查渲染的 HTML 时，它也符合我的预期。 问题是，页面上显示的实际ListItem与其中任何一个都不匹配； 而不是选中的项目移动到页面底部，而是检查列表中的最后一个项目。

这是一个“最小、完整且可重现”的示例：

https://codesandbox.io/s/react-playground-su7iw?file=/index.js

Answer 1

您使用 index 作为ListItem键，这是不推荐的，在您的情况下会导致这些问题。 从key={i}更改为key={item.itemID}应该可以解决这些问题。