javascript - 对话框未关闭 native react

Question

我正在使用React native popup dialog包裹。我正在尝试关闭对话框 onPress，然后离开屏幕。导航正在进行，但对话框保持打开状态。并显示警告无法对未安装的组件执行 react 状态更新。

    <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>

navigate()函数

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

Answer 1

setState是async，不会阻塞执行。当 setState 被调用时，下一行执行(setState 尚未完成)，并且您已导航到 Home。

您可以在setState中回调进行导航。

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