javascript - React Native - 同步运行函数

Question

我写了下面的代码，它运行流畅但是我遇到了一个问题:

submitFormToBackend = async () => {
  if (this.paymentMethod === 'apple-pay') {
    this.setState({ showLoadingIndicator: true }); // <-- below await setTimeout can confirm this line run before it
  }

  let requester = new ApplePayRequester({...this.form});
  let applePay = new ApplePay();

  await setTimeout(async () => {
    let cardTokenResponse = await applePay.getCardToken();
    if (cardTokenResponse.isSuccess()) {
      requester.setCardToken(cardTokenResponse.message);
      let response = await requester.pushToBackend();

      this.setState({ showLoadingIndicator: false }); //<-- below setTimeout can confirm this line run before them
      if (response.isSuccess()) {
        setTimeout(() => { this.navigator.backToPreviousScreen(); }, 800);
      } else {
        setTimeout(() => { Alert.alert('your purchase has error. Try again'); }, 800);
      }
    } else {
      this.setState({ showLoadingIndicator: false });
      setTimeout(() => { Alert.alert('cannot get your card token.'); }, 800);
    }
  }, 800);
};

我在该组件中的 render():

render() {
  return (
    <View style={styles.form}>
      <LoadingIndicator visible={this.state.showLoadingShader} />

      <InputBox />
      <InputBox />

      <SubmitButton />
    </View>
  );
}

如你所见，有很多setTimeout() 函数，如果我不使用setTimeout() 来限制函数，似乎函数会一起崩溃一个一个运行。

但是，这不是一个好的做法，因为成功运行没有默认毫秒(毫秒可以设置为 700 毫秒或 1500 毫秒等)。因此我想问一下，除了使用 setTimeout() 之外，是否有任何解决方案可以确认上一个函数在下一个函数开始之前已经运行？

---

更新

程序:

第 1 步 - 按提交按钮
第 2 步 - 弹出确认模式
第 3 步 - 用户确认，取消确认模式，将 showLoadingIndicator 设置为 true 以显示加载指示器
第四步 - 调用ApplePay并弹出ApplePay UI
第 5 步 - 用户确认，将 showLoadingIndicator 设置为 false 以关闭加载指示器并导航到上一个屏幕

---

不使用setTimeout()时遇到的问题:

第 4 步 - 将 showLoadingIndicator 设置为 true 后 ApplePay UI 无法弹出，下面是遇到问题的代码:

 let cardTokenResponse = await applePay.getCardToken();

第 5 步 - 将 showLoadingIndicator 设置为 false 之前会弹出 Alert，这会停止设置，下面是遇到问题的代码:

  this.setState({ showLoadingIndicator: false });
  if (response.isSuccess()) {
  } else {
    setTimeout(() => { Alert.alert('your purchase has error. Try again'); }, 800);
  }

Answer 1

setState 函数的第二个可选参数是一个与状态更改同步运行的回调函数。

因此您可以只依赖以下内容:

this.setState({
  //change state variables here
}, () => {
   //do the next work here...
});

回调函数总是在状态改变后运行。

在您的代码中，这会起作用:

this.setState({ showLoadingIndicator: false }, () => {
  if (response.isSuccess()) {
      this.navigator.backToPreviousScreen();
  } else {
   Alert.alert('your purchase has error. Try again');
  }
});