Часто я хочу обновить состояние, а затем сразу же использовать обновленное состояние. Некоторые примеры, с которыми я столкнулся на сегодняшний день:

  • Переключение состояний между true и false, а затем использование этих значений для запуска других событий
  • В калькуляторе (см. функцию performOperation)
  • В таймере помидора: отображаемый таймер должен получить свое начальное значение из пользовательской настройки, а затем немедленно начать обратный отсчет (см. функцию startTimer)

Однако this.setState является асинхронным, как описано в Документации React. (На самом деле в документации говорится, что он может быть асинхронным. По моему ограниченному опыту, он почти всегда асинхронный.)

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

Пример: неверный код. Это не даст вам надежные результаты, так как состояние могло не обновиться.

this.setState({
  timeTilBabyWakesUp: 90,
  timeTilBabyScreams: 92
});
// The input to `shouldICode` may not be 90, as the state has not yet updated
shouldICode(this.state.timeTilBabyWakesUp);

Пример: правильный код. Обратный вызов обеспечивает использование обновленного состояния. Обратный вызов — это все, что находится после () => между {}. Это может быть несколько строк кода. Ниже я использовал только одну строку кода.

// The input to `shouldIcode` is now guaranteed to be 90
this.setState(
  {timeTilBabyWakesUp: 90,
   timeTilBabyScreams: 92}, () => {
     shouldICode(this.state.timeTilBabyWakesUp);
  });

Проблема решена!