按下提交按钮后的动作顺序

时间:2018-10-02 10:15:16

标签: react-native activity-indicator

我有一个链接到resetPasswordHandler的按钮-在输入用户电子邮件后,请求成功后,将出现一个弹出警报,要求检查用户的电子邮件,然后是模式关闭和状态重置模式。

我认为这(请参阅下面的代码)可以工作。但是,当我按下“提交”按钮时,模式重置并关闭,然后弹出窗口出现。

我不太清楚我哪里出了问题。

    resetPasswordHandler = () => {
    console.log("Resetting Password")
    firebase.auth().sendPasswordResetEmail(this.state.controls.email.value).then(
        alert("Please Check Your Email")
    ).then(
        this.reset()
    ).then(
        this.refs.resetPasswordModal.close()
    ).catch(function(e){
        alert(e);
    })
};

1 个答案:

答案 0 :(得分:2)

.then(...)上调用Promise时,应传递一个函数(例如,类似于将函数传递给按钮按下处理程序)。

myPromise
  .then(() => this.props.dispatch(someAction()))

现在,您正在调用函数而不是传递它。

请牢记以下几点,您的代码应如下所示:

firebase.auth().sendPasswordResetEmail(this.state.controls.email.value)
  .then(
    () => alert("Please Check Your Email")
  )
  .then(
    () => this.reset()
  )
  .then(
    () => this.refs.resetPasswordModal.close()
  )
  .catch(function(e){
    alert(e);
  })

(我在示例中使用了箭头功能,当然也可以使用function语法)

您在.catch中正确地做到了这一点,但在其他通话中似乎错过了!

您还可以使用async await语法,这使您的代码更具同步感:

resetPasswordHandler = async () => {
  try {
    // Notice the "await" before calling the reset function, which returns a promise.
    await firebase
      .auth()
      .sendPasswordResetEmail(this.state.controls.email.value)

    alert("Please Check Your Email")

    this.reset()

    this.refs.resetPasswordModal.close()
  }
  catch(e) {
    alert(e);
  }
};

如果包装函数具有async关键字,则可以通过使用await调用它们来以更同步的方式解析promise。包装函数然后返回一个承诺,该承诺会在其主体完成时解析。