Выполнить функцию после завершения обновления множества setStates

Question

У меня есть функция, которая устанавливает состояние. Я хочу вызвать функцию после установки состояния. Вот мой код:

sanityChecking() {
    this.checkFirstName();
    this.checkSecondName();
    this.checkDomain();

    // Call this function after the top 3 functions finish setting their state
    this.Predict();
}

Первые три функции имеют setState в них. Я пытаюсь запустить четвертую функцию this.Predict после того, как они все сделали обновление. Есть идеи как?

Answer 1

setState может установить несколько состояний inline, и в дополнение к этому, у него есть функция обратного вызова:

this.setState({
    stateToChange: value,
    anotherStateToChange: value2,
    thirdValueToChange: value3
}, () => {
    console.log('I finished changing the states');
});

Таким образом, для вашего кода вы можете создать function который устанавливает состояние и принимает параметр в качестве обратного вызова. Затем добавьте этот параметр обратного вызова во второй аргумент setState, Как это:

function checkFirstName(stateCallback) {
    setState({firstName: 'Charley'}, stateCallback);
}

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

Для получения дополнительной информации я наткнулся на классную статью о setState, которую стоит прочитать. (У меня нет филиалов. Просто быстрый поиск в Google:)

Дайте мне знать, если это поможет, или если у вас есть еще вопросы.

Answer 2

Потому что this.setState является асинхронным. Скорее всего, ваши три функции могут быть запущены в одном обновлении. Что вы можете сделать, вместо вызова this.setState внутри каждой функции, вы можете вернуть значение того, что вы хотели бы обновить. Таким образом, вы можете использовать второй аргумент setState, который является обратным вызовом.

sanityChecking() {
  this.setState({
    first: this.checkFirstName(),
    second: this.checkSecondName(),
    domain: this.checkDomain(),
  }, () => {
    this.setState({ predict: this.Predict());
  });
}

Answer 3

Добавьте дискриминантную функцию в this.Predict, чтобы проверить три вышеуказанных свойства.

if (firstName && secondName && Domain){
    this.predict()
}

Answer 4

Используйте функцию вместо объекта в ваших вызовах setState. Подробнее читайте в документации React

Функция принимает в качестве первого аргумента предыдущее состояние и реквизит во время его вызова. Это обеспечит актуальность состояния.

this.setState(
  (state, props) => ({
    predict: `${state.firstName} ${state.secondName}`
  })
);

Answer 5

Вы можете добавить аргумент к каждой функции, который является обратным вызовом для вызова setState.

Таким образом, в каждой из ваших трех функций это будет выглядеть примерно так:

function checkFirstName(setStateCallback) {
    ...
    setState({...}, setStateCallback)
    ...
}

и в вашей основной функции вы можете связать их вместе:

function sanityChecking() {
  this.checkFirstName(function () {
      this.checkSecondName(function () {
          this.checkDomain(function () {
              this.Predict();
          })
      })
  })
}