React：為什么改變狀態會使組件處於如此奇怪的狀態

Question

首先，讓我先發制人地解決這個問題，我知道我們不應該改變狀態。 我只是想探索如果我們直接改變狀態到底會出現什么問題。

在這里，我構建了一個簡單的待辦事項應用程序。 待辦事項存儲在一個數組中。 例如[{id: 0, name: 'foo'}, {id: 1, name: 'bar'}]

要從列表中刪除一個待辦事項，我認為我們應該做的是，即不可變的方法是從列表中過濾掉該待辦事項並返回一個新列表的副本。 IE

setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));

但我在想，這可能很慢，因為它是一個 O(n) 過程。 如果我們知道列表中每個待辦事項的索引，並且我們可以進行恆定時間查找以從列表中找到該項目並將其設置為null或其他內容。

實現這一點的一種方法是擁有一個從0開始的count變量，我們將其用作每個待辦事項的id ，並且每次添加新的待辦事項時都會增加計數。 在這種情況下，id 將等於與待辦事項在列表中的位置相對應的數字索引。 我們只需獲取該 ID 並直接更新列表。

todos[id] = null;

然而，這使組件處於一種奇怪的狀態，每次我刪除一個項目時，列表實際上都會添加一個待辦事項。

例如，在我們有[{id: 0, name:'foo'}]在我們執行todos[0] =null ，我們最終會得到[null, {id: 1, name:''}]

這是一個現場演示，您可以使用https://codesandbox.io/s/react-todo-mutate-e0zj3?file=/src/App.js

有人能指出這個錯誤究竟是怎么發生的嗎？

我再次知道改變狀態不是正確的方法，但我只是想更深入地了解 React，所以我做了這個小實驗。

Answer 1

這不是反應行為:)。 按鈕具有隱式 type="submit"。 所以點擊刪除按鈕你正在提交表單（添加新的待辦事項，並在數組中的某個索引處設置 null）