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:''}]

有人能指出这个错误究竟是怎么发生的吗？

我再次知道改变状态不是正确的方法，但我只是想更深入地了解 React，所以我做了这个小实验。

Answer 1

这不是反应行为:)。 按钮具有隐式 type="submit"。 所以点击删除按钮你正在提交表单（添加新的待办事项，并在数组中的某个索引处设置 null）