Реакция: введите onChange, чтобы обновить состояние на шаг позади

Question

У меня есть вход с атрибутом onChange, который вызывает функцию handleChange, которая обновляет состояние с помощью нового значения, которое было введено во ввод.

Issue 1 - Когда состояние регистрируется в конце handleChange, оно содержит старое состояние или одну входную букву позади (будет записываться «ca» при вводе «cat»).

Выпуск 2 - Без event.persist событие является «синтетическим» и не содержит значения. Допустимо ли хранить persist или это должно быть иначе?

Ввод:

onChange={this.handleChange}

Какая функция вызывает:

handleChange = (event) => {
    event.persist() // without this the event is 'synthetic'

    const newTerms = {...this.state.terms}
    newTerms.text = event.target.value

    this.setState({terms: newTerms})

    console.log('state', this.state) //logs the previous state
}

this.state.terms.text следует изменить:

this.state = {
    terms: {
        text: '',

Answer 1

состояние обновления является асинхронным. То, что вы хотите, это:

this.setState({terms: newTerms}, () => console.log('state', this.state))

Даже без persist событие содержит значение внутри обработчика события. Это верно только в синхронном контексте, поэтому вы не должны передавать событие setState или другим асинхронным методам.