使用模态时"Warning: can only update a mounted or mounting component"

Question

我想在屏幕上按下一个按钮在同一页面中使用两个模态。他们应该依次显示和隐藏。首先，我需要显示isModalVisibleConnection模态，然后应将其关闭，并应显示另一个模态（isModalVisible模态）。最后，isModalVisible模式也应关闭，并且该应用程序应重定向到另一个屏幕。我的代码如下：

  onPress() {
      this.setState({ isModalVisibleConnection: true ,isModalVisibleMain: true});
      LIB.requestAccess().then((response) => {
        console.log("responsexxxx exit part",response);
        if(response.requestCode==1)
          {
            this.setState({ isModalVisibleConnection: false , isModalVisible: true});
              //////Wait for 10 seconds and Redirecting
              if(this.timer > 0) return;
              this.timer = setTimeout(() => {
                //turn off the pop up
                this.props.navigation.navigate('ParkInBuilding', {user: this.state.passedProps.user,  positionState:this.state.passedProps.positionState, parkingState: this.state.passedProps.parkingState, activeSection: 'ParkNewError_0'});
                this.timer = null;  //not necessary if you are unmounting the component
              }, 10000);
            }
            else {
              console.log("something wrong!!",response.requestMessage);
              Alert.alert(
                  'Error',
                  response.requestMessage ,
                  [
                    //{text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
                    {text: 'OK', onPress: () => this.setState({ isModalVisibleMain: false, isModalVisible: false, isModalVisibleConnection: false })},
                    //{text: 'OK', onPress: () => console.log('OK Pressed')},
                  ],
                    { cancelable: false }
                 )
            }
            console.log("responesssssssssss Exit",response);
          });
        }

在渲染模式中，我使用以下模式将模式放置：

  <Modal isVisible={this.state.isModalVisibleMain}>
              <Modal isVisible={this.state.isModalVisible}>
                  <View style={styles.timerContainer}>
                  <Text style={styles.orangeTextBold}>Si prega di passare il{"n"} cancello di uscita.{"n"}
                  <Text style={styles.itemBold}>{"n"} </Text>
                  <Text style={styles.itemBold}>Arrivederci e grazie per aver utilizzato il nostro servizio.{"n"}
                  </Text> </Text>
                  <Text style={styles.itemBold}> </Text>
                  <CountdownCircle
                    seconds={10}
                    radius={40}
                    borderWidth={8}
                    color="#FABB00"
                    bgColor="#fff"
                    textStyle={{ fontSize: 30 }}
                    onTimeElapsed={() => console.log('Elapsed!')}
                  />
                    </View>
                  </Modal>
                  <View isVisible={this.state.isModalVisibleConnection}>
                    <View style={styles.loader}>
                    <Text style={styles.ComOrangeTextBold}>{I18n.t('Comunicazione')}</Text>
                    <Text style={styles.ComOrangeTextBold}></Text>
                    <View>
                      <Bars size={30} color="#FABB00" />
                    </View>
                    </View>
                  </View>
                </Modal>

我有一个主模态（isModalVisibleMain），其他模态在其中。另外，第二种模态是视图。我应该提到，当我以不同的方式使用模态（单独放置模态）时，第二种模态在iOS中不显示。这是该应用以适当的方式显示两种模式的唯一方法。问题是，当我重定向到下一个屏幕时，它向我显示了以下警告：

警告：只能更新安装或安装组件。通常 表示您称为设置状态，替换状态或强制更新 卸载组件...

它会导致锁定我的应用程序。您是否知道我该如何处理此警告？（如果您需要更多代码或信息，请在帖子下提及它。谢谢）

Answer 1

setState动作是异步的，并且被批处理以获得性能。

setState（）不会立即突变。 等待国家过渡。访问此。 方法可能会返回现有值。没有 保证对SetState的通话和呼叫的呼叫同步操作可能 批次获得性能。

在您的情况下，您可能想确定您的导航作业将在设定的结尾处触发：

this.setState（{ismodalvisible：false}，（）=> this.props.navigation.navigation.navigate（...））;