Question

我想将两个处理程序合并为一个，其中一个是在firebase中创建用户的处理程序，另一个则存储其他用户信息。

这将在Firebase身份验证中创建一个用户

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

这会将用户信息存储在Firebase存储中

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

我希望能够合并两个处理程序，但要使它异步执行（即先执行authHandler，然后执行userDataHandler）。我希望我正确地使用了术语> <

过去几天我一直在绞尽脑汁，但似乎无法弄清楚。想知道你们中的一个人是否可以向我解释我该如何解决这个问题。提前致谢。

编辑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）回答您的问题时，有一种简单的方式来处理代码块，您需要先完成另一个代码块，然后再执行：Promises。您可以尝试这样的事情

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*/
})

将两个处理程序合并为一个并按顺序执行

1 个答案: