对话框未关闭本机反应

Question

I am using the React native popup dialog package. I'm trying to close the dialog onPress and then navigate away from the screen. The navigation is happening, but the dialog remains open. And a warning Can't perform a react state update on an unmounted component is shown.

    <Dialog
    dialogStyle = {{textAlign:'center'}}
    visible={this.state.dialogVisible}
    height = {150}
    dialogAnimation={new SlideAnimation({
    slideFrom: 'bottom',
    })}
    >
      <DialogTitle
      title = {"Information"}
      textStyle = {{textAlign:'center',fontFamily:'raleway-regular',color:'#4abce3'}}
      />
      <DialogContent style = {{justifyContent:'center',alignContent:'center'}}>
        <Text>{this.state.requestResult}</Text>
        <Button
          title = "Okay!"
          onPress = {()=>{ this.navigate() }}
          type = "outline"
          buttonStyle = {styles.dialogButton}
          titleStyle = {styles.choiceButtonTitle}
        />
      </DialogContent>
  </Dialog>

The navigate() function

    navigate = () => {
      const { navigation } = this.props;
      this.setState({dialogVisible:false})
      navigation.navigate('Home'); 
}

Answer 1

setState is async , which does not block the execution. When setState gets called next line executes ( setState is yet to complete) and you got navigated to Home .

You can you callback in setState for navigation.

navigate = () => {
      const { navigation } = this.props;
      this.setState({dialogVisible:false}, () => navigation.navigate('Home')) 
}