如何在 React Native 中的 setState 之前停止执行答案

【问题标题】：How to stop execution until a setState in React Native如何在 React Native 中的 setState 之前停止执行
【发布时间】：2019-07-28 02:40:36
【问题描述】：

最近创建了注销功能。当用户单击注销时，将提示他们一个对话框，询问“您确定要注销吗？”。对于 Dialog ，我使用了一个名为 react-native-popup-dialog 的包。

实际上，发生的事情是因为这个应用程序与 redux 结合在一起。我将操作用于注销功能。对于对话框，我使用了组件级状态。

我的对话代码：

<Dialog
    visible={this.state.showDialog}
    dialogTitle={
    <DialogTitle 
    title="Confirm Logging Out"
    textStyle={{ fontSize: 15 }} 
    />}
    width={0.8}
    footer={
        <DialogFooter>
          <DialogButton
            text="CANCEL"
            textStyle={{ fontSize: 14 }}
            onPress={() => {
              this.setState({ showDialog: false });
            }}
          />
          <DialogButton
            text="CONFIRM"
            textStyle={{ fontSize: 14 }}
            onPress={() => {
                this.onLogoutPress();
            }}
          />
        </DialogFooter>
      }
    onTouchOutside={() => {
    this.setState({ showDialog: false });
    }}
>
    <DialogContent>
        <Text style={{ fontSize: 14, top: 10 }}>Are you sure you want to logout ?</Text>
    </DialogContent>
</Dialog>

还有我的注销按钮代码：

<TouchableOpacity onPress={()=> this.setState({ showDialog: true})} >
  <CardItem>
    <Icon name="log-out" style={{ color: '#03A9F4' }} />
    <Body>
      <Text>Logout</Text>
    </Body>
    <Right>
      <Icon name="arrow-forward" />
    </Right>
  </CardItem>
</TouchableOpacity>

所以我的onLogoutPress() 代码：

onLogoutPress() {
this.setState({ showDialog: false },() => {
    this.props.logOut(() => {
        this.props.navigation.dispatch(resetActionToWelcome);
    })
})

}

我面临的问题是，当我单击确认按钮时，"onLogoutPress()" 会弹出，并且对话框不会关闭，而不是 react 导航的 resetAction 会弹出。由于 setstate 是异步功能，我认为它需要时间才能恢复，其中注销操作会迅速启动，并且应用程序会从启动屏幕启动。但直到对话框保持打开状态。

如何处理？

【问题讨论】：

标签： javascript react-native logout

【解决方案1】：

改变你的功能，如下所示，

希望它对你有用第一种方法，

onLogoutPress() {
   this.setState({ showDialog: false },() => {
   setTimeout(() => {
     this.props.logOut(() => {
           this.props.navigation.dispatch(resetActionToWelcome);
      })
      }, 500);

   })
}

使用箭头函数的另一种方式，

onLogoutPress = () => {
   this.setState({ showDialog: false },() => {
     this.props.logOut(() => {
           this.props.navigation.dispatch(resetActionToWelcome);
      })
   })
}

【讨论】：

实际上，它是一种解决方法，对吗？但是面对这个问题的实际方法是什么？
是的，你的方法是对的，但我不知道为什么它不起作用，所以我建议我的方法
setState 是异步函数，它一直等到不使用箭头函数设置状态
找不到你吗？
你第一个正在工作，但我认为这不是一个干净的方法？