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}應該可以解決這些問題。