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

您可以使用setState的第二个参数

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

Answer 2

setState有一个回调，您可以在状态更改完成后使用该回调执行操作

setState({myvar: "updateval"}, () => {
  //Do something after the state is changed
})

如何停止直到反应本地执行setstate状态？

2 个答案: