Часто я хочу обновить состояние, а затем сразу же использовать обновленное состояние. Некоторые примеры, с которыми я столкнулся на сегодняшний день:
- Переключение состояний между
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); });
Проблема решена!