未覆盖反应状态

this.setState 采用 部分状态更新 作为论据。这意味着您给setState的任何内容都将与当前状态合并。

以这种方式使用排列运算符与不使用它是相同的。但是,如果状态更新依赖于前一个状态,那么应该使用setstate的回调形式,以避免出现错误。

this.setState((prevstate, props) => ({...prevstate, foo: "Foo" }))

从文档中:

调用setState()时,react将提供的对象合并到 当前状态。

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-are-merged

合并很浅,因此foo被替换,所有其他状态都保持其属性值。

功能形式 setState 应在以下情况下使用:

因为 this.props 和 this.state 可以异步更新,您 不应依赖它们的值来计算下一个状态。

this.setState(prevState=>({loading: !prevState.loading}));

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

你不需要扩频器。只需设置所需的键。我认为这样做的人担心变异,但这不是一个问题。这不是还原。 setState 照顾你很多。

我也注意到了,这种语法很容易出错…我认为人们对正确的语法感到困惑,看起来是:

 this.setState((prevState, props)=>({
  ...prevState, 
  foo : "Hello World" 
}))

有关设置状态的详细信息:

https://reactjs.org/docs/react-component.html#setstate

https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b

这是不需要的,它总是保持其他属性相同,这里的排列运算符不相关。 如果要更改状态属性或取消它们,则应使用object.assign(),然后将其保存到您的状态。