Question

我有一个初始化状态的组件，如下所示：

class App extends Component {

  constructor(props) {
    // initialize the parent class which is Component
    super(props)

    this.state = {
      currentTripName : "",
      pendingTrips : [],
      completedTrips : []
    }

  }

现在，假设在按钮单击事件中，我将状态分配为：

addButtonPressed() {

    this.setState({
   foo : "Hello World" 
})

}

这是否意味着其他所有状态属性，例如

  currentTripName : "",
          pendingTrips : [],
          completedTrips : []

将被删除。

我检查了并没有将它们移除。如果未删除它们，那么为什么人们有时会使用以下语法复制属性

this.setState({
  ...this.state, 
  foo : "Hello World" 

})

Answer 1

this.setState以部分状态更新作为参数。这意味着您提供给setState的任何内容都将与当前状态合并。

以这种方式使用扩展运算符与不使用它相同。但是，如果您的状态更新取决于先前的状态，则应使用setState的回调形式，以避免出现错误

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

Answer 2

从文档中：

调用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

Answer 3

我也注意到了，这种语法容易出错...我认为人们对正确的语法感到困惑，就像这样：

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

有关setState的更多信息：

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

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

Answer 4

您只需要价差运算符。只需设置所需的键即可。我认为这样做的人担心突变，但这在这里不是问题。这不是redux。 setState为您服务。

Answer 5

这不是必需的，它始终使其他属性保持不变，此处的散布运算符无关。如果要更改状态属性或删除状态属性，则应使用Object.Assign（），然后将其保存为状态

反应状态不被覆盖

5 个答案: