this.setState 除非我将整个对象传递给它，否则不会更新状态

Question

我有一个组件，其中有一个具有某些属性的状态。构造函数如下所示：

constructor (props, context) {
  super(props, context)

  this.state = {
    property1: '',
    property2: '',
    property3: '',
  }
}

说我想更新 property1，我通常会做的是这样的：

this.setState({property1: 'my new property1'})

然而，这不起作用，property1 的值不会改变。要更新任何状态，我必须执行以下操作：

let obj = this.state
obj.property1 = 'my new property1'
this.setState(obj)

我知道以前的方法曾经没有问题。有什么改变吗？在某些情况下我不能简单地设置每个状态属性吗？

Answer 1

setState 异步工作。如果您调用 setState 然后立即检查该值，它还没有更新。

this.setState({property1: 'my new property1'});
console.log(this.state.property1); //old value

如果要等待新值，可以使用setState中的回调参数

this.setState({property1: 'my new property1'}, () => {
    console.log(this.state.property1);
});

您在使用整个对象时看到状态更新的原因是您通过编辑它来改变状态，这是不好的。

this.setState not updating the state unless I pass the whole object to it