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中的callback参数

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

您在使用整个对象时看到状态更新的原因是因为您通过编辑来改变状态,这很糟糕.