Как реагирует государство работает?

Question

Я работаю с контролируемой формой и имею функцию handleChange, которая получает входное значение и сохраняет его в состоянии, как state.mainField.firstInput.

handleChange = (e) => {
    // the input value was 2, then I enter 3
    console.log(this.state.mainField.firstInput); // expect 2
    console.log(this.state); // expect { mainField: { firstInput: 3 } }
    /*
     ...
    */
    this.setState({ mainField: newData });
}
 /*
  ...
 */
<form>
  <input value={this.state.mainField.firstInput} onChange={this.handleChange} />
</form>

Когда я пытаюсь распечатать state.mainField.firstInput на консоли в верхней части функции handleChange, я получил другой результат с state вто же поле.Точное firstInput свойство было значением текущего состояния, а свойство в объекте this.state было таким же, как после setState функций.Почему эти одинаковые значения отличаются?

Answer 1

JavaScript является синхронным и однопоточным языком.Таким образом, он работает построчно

Вы ведете консольный журнал до того, как ваше состояние изменится, поэтому оно, очевидно, даст 2. Даже если вы console.log после установки состояния, вы также можете не получить ожидаемый результатпотому что установленное состояние требует времени для выполнения.

// Это может или не может работать

    handleChange = (e) => {
    // the input value was 2, then I enter 3
    console.log(this.state.mainField.firstInput); // expect 2        

    this.setState({ mainField: newData });
    console.log(this.state); // expect { mainField: { firstInput: 3 } }
}

Но это, безусловно, будет работать

 handleChange = (e) => {
        // the input value was 2, then I enter 3
        console.log(this.state.mainField.firstInput); // expect 2        

        this.setState({ mainField: newData },()=>{
console.log(this.state); // expect { mainField: { firstInput: 3 } }
    });

    }

Answer 2

Здесь следует отметить две вещи

1. setState равно asynchronous и, следовательно, оно не будет отражать изменение немедленно
2. Во-вторых, когда вы регистрируете объект с помощью console.log(), он оценивается после его расширения и, следовательно, к этому времени значение обновляется.Следовательно, вы видите разницу между

console.log(this.state.mainField.firstInput); // expect 2
console.log(this.state); // expect { mainField: { firstInput: 3 } }