Объединение двух обработчиков в один и выполнение их в последовательности

Question

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

Это создает пользователя в Firebase Authentication

authHandler = () => {
  const authData = {
      email: this.state.controls.email.value,
      password: this.state.controls.password.value
  };
  this.props.onTryAuth(authData, this.state.authMode);
};

Это хранит пользовательскую информацию в Firebase Storage

userDataHandler = () => {
  this.props.onAddUserData(
     this.state.controls.userName.value
  )
};

Я хочу иметь возможность комбинировать оба обработчика, но иметь его так, чтобы он выполнялся асинхронно (т.е. сначала authHandler, а затем userDataHandler).Надеюсь, я правильно использую терминологию> <</p>

Последние несколько дней ломал голову, но никак не могу понять.Мне было интересно, если один из вас, ребята / ребята, может объяснить мне, как я должен решать эту проблему.Заранее спасибо.

Редактировать 1 компонент

class SignUp extends Component {
    state = {
        controls: {
            email: {
                value: "",
                valid: false,
                validationRules: {
                isEmail: true
            },
            touched: false
        }, ... etc

updateInputState = (key, value) => {
    let connectedValue = {};
    if (this.state.controls[key].validationRules.equalTo) {
        const equalControl = this.state.controls[key].validationRules.equalTo;
        const equalValue = this.state.controls[equalControl].value;
        connectedValue = {
            ...connectedValue,
            equalTo: equalValue
        };
    }
    if (key === 'password') {
        connectedValue = {
            ...connectedValue,
            equalTo: value
        };
    }
    this.setState(prevState => {
        return {
            controls: {
                ...prevState.controls,
                confirmPassword: {
                    ...prevState.controls.confirmPassword,
                    valid: key === 'password' ? validate(
                        prevState.controls.confirmPassword.value, 
                        prevState.controls.confirmPassword.validationRules, 
                        connectedValue
                        ) 
                        :prevState.controls.confirmPassword.valid
                },
                [key]: {
                    ...prevState.controls[key],

                    value: value,
                    valid: validate(value, prevState.controls[key].validationRules, connectedValue), touched: true
                }
            }
        };
    });
}

Answer 1

Если я правильно понимаю ваш заголовок, вы хотите выполнить эти две функции синхронно , как по порядку, правильно?Это звучит как-то нелогично, но синхронное выполнение на самом деле означает, что код ожидает завершения предыдущего блока, прежде чем сам он будет выполнен.Асинхронное выполнение означает, что два блока кода могут выполняться одновременно, что в вашем случае может привести к условиям состязания.

В любом случае, для ответа на ваш вопрос, React (и Javascript), есть простой способ передать блок кода, который требует завершения другого блока перед его выполнением: Обещания .Вы можете попробовать что-то вроде этого

authAndUserDataHandler = () => {
  return new Promise(function(resolve, reject){
    const authData = {
      email: this.state.controls.email.value,
      password: this.state.controls.password.value
    };
    this.props.onTryAuth(authData, this.state.authMode);
  })
  .then((/*returned data from resolved promise*/)=>{
    this.props.onAddUserData(
      this.state.controls.userName.value
   )
  })
  .catch((/*returned error if promise rejects*/)=>{
    /*do something if the initial block of code in the promise rejects/fails*/
})