我正在努力寻找原因：
addItem = item => {
this.setState({ grudges: [grudge, ...this.state.grudges] });
}
存在相当尴尬的实现。不会
this.state.grudges.push(grudge)
足够了吗？
答案 0 :(得分：5)
这还不够，因为React state is expected to be immutable：
请不要直接更改this.state，因为之后调用setState（）可能会替换您所做的更改。将此this.state视为不可变。
此“笨拙的实现”也是不正确的，this.state不应与this.setState一起使用，因为setState is asynchronous可能会导致竞争状况：
将setState（）视为请求而不是立即命令来更新组件。为了获得更好的感知性能，React可能会延迟它，然后在一次通过中更新几个组件。 React不能保证状态更改会立即应用。
<...>
setState（）并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用setState（）之后立即读取this.state是一个潜在的陷阱。
正确的方法是使用更新程序功能：
addItem = item => {
this.setState(({ grudges }) => ({ grudges: [grudge, ...grudges] }));
}
它还受益于语法的分解。
答案 1 :(得分：1)
这是必需的，因为React不会跟踪状态变化，例如Vue。您必须明确告知反应状态已更改。如果您通过直接修改this.state来更改状态，状态将被更新，但UI将不会被更新，因为React不会知道更改。
答案 2 :(得分：1)
在反应中，您只能使用setState更改状态：
请勿直接更改this.state，因为之后可能会调用setState（） 替换您所做的突变。将this.state视为 不变的。