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以显示加载指示符
步骤4 -调用ApplePay并弹出ApplePay UI
第5步-用户确认，将showLoadingIndicator设置为false以关闭加载指示器并浏览上一屏幕

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

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

 let cardTokenResponse = await applePay.getCardToken();

步骤5 -在将showLoadingIndicator设置为false之前，将弹出警报，这将停止设置，以下是遇到问题的代码：

  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');
  }
});

希望这对您有所帮助。快乐编码：）

React Native-同步运行功能

1 个答案: