Как правильно вызвать обратный вызов в setState (updater [, callback])?

Question

Поэтому я изо всех сил пытался передать обратный вызов this.setState(), потому что я делал это следующим образом:

this.setState({ anyState }, this.anyFunction()); Функция была вызвана, но она не была вызвана на самом деле после обновления состояния,В результате, когда я также обновлял тот же anyState в моем anyFunction, между обновлениями двух состояний был какой-то конфликт, и только первое из них было эффективным.

Затем я обнаружил, чтоМне нужно было либо

this.setState({ anyState }, () => this.anyFunction());

либо

this.setState({ anyState }, function() { this.anyFunction() });

, чтобы все работало правильно.

Почему так?Почему мой первый подход неверен?

Answer 1

В первом примере вы используете результат функции в качестве второго аргумента.

Скажем this.anyFunction возвращает константу "some_text", использование

this.setState({ anyState }, this.anyFunction());

аналогично использованию

this.setState({ anyState }, "some_text");

Во втором примере вы фактически передаетеобратный звонок.Или функция в качестве аргумента.Эта функция еще не выполнена, она будет выполнена в конце setState ().

Для получения дополнительной информации об асинхронном программировании и обратных вызовах, вы можете посмотреть этот доклад: https://javascript -conference.com/ javascriptecmascript / асинхронность-параллелизм /

Answer 2

Первый подход передает результат вызова this.anyFunction в качестве обратного вызова.Скорее всего, это не то, что вам нужно.

Чтобы это исправить, вам нужно убрать круглые скобки, то есть изменить код следующим образом:

this.setState({ anyState }, this.anyFunction);

Однако это проблема,что привязка this внутри anyFunction больше не будет указывать на экземпляр класса.Чтобы это исправить, вам нужно либо объявить anyFunction как функцию стрелки, либо явно связать this.