Question

最近已经创建了注销功能。当用户单击注销时，系统将提示他们一个对话框，询问“您确定要注销吗？”。对于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()"会弹出，并且该对话框没有关闭，而是反应导航的resetAction弹出了。由于setstate是异步函数，我认为花了一些时间才能恢复，其中注销操作开始，应用程序从启动屏幕启动。但是直到对话框保持打开状态。

如何处理？

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

如何停止执行直到React Native中的setState

1 个答案: