отреагировать на изменение формы для обновления состояния

Question

Я довольно новичок в React.js и просто столкнулся с проблемой при попытке проверить форму.У меня есть следующее поле формы и функция onChange:

<AvField type="text" name="name" id="name" placeholder="Name" value={scheduleEvent.name} onChange={this.inputChange} className="form-control-sm" required />

inputChange = (event) => {
   const { name, value } = event.target;
   console.log(name, value);
   let scheduleEvent = {...this.state.scheduleEvent};
   console.log(scheduleEvent);
   scheduleEvent[name] = value;
   console.log(scheduleEvent);
   this.setState({scheduleEvent});
   console.log(this.state.scheduleEvent);
}

Когда я набираю «a», я получаю следующие выходные данные console.log:

name a //as expected
{name: ""} //as expected
{name: "a"} //as expected
{name: ""} //this.state.scheduleEvent did not get updated

Затем, если я набираюв другом символе выводятся console.log:

name aa //as expected
{name: "a"} //as expected, but for whatever reason it did not get updated on the first invocation of inputChange
{name: "aa"} //as expected
{name: "a"} // did not get updated

Однако, когда я отправляю форму, this.state.scheduleEvent верен.

Я также пробовал этот пример, связанный свеб-сайт React: https://codepen.io/gaearon/pen/VmmPgp?editors=0010 Та же проблема существует и там.Есть ли способ исправить это?

Спасибо

Answer 1

Осторожно, setState является асинхронным!Обновления состояний отправляются в очередь, которая будет находиться в состоянии ожидания до обработки, поэтому существует вероятность того, что вам будет возвращено существующее состояние.Чтобы гарантировать, что мы ВСЕГДА получим доступ к недавно обновленному состоянию, this.setState имеет второй аргумент, который позволит нам связывать обратный вызов после обновления состояния.

Обновите вашу функцию изменения ввода:

inputChange = (event) => {
   const { name, value } = event.target;
   console.log(name, value);
   let scheduleEvent = {...this.state.scheduleEvent};
   console.log(scheduleEvent);
   scheduleEvent[name] = value;
   console.log(scheduleEvent);
   this.setState({ scheduleEvent }, () => {
       console.log(this.state.scheduleEvent);
   });
}