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);
});

Причина, по которой вы видите обновление состояния при использовании всего объекта, состоит в том, что вы изменяете состояние, редактируя его, что плохо.