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中显示。这是应用程序以正确的方式显示两种模式的唯一方式。问题是，当我重定向到下一个屏幕时，它会显示以下警告：

警告：只能更新已安装或安装的组件。这通常意味着您调用了set state，替换状态或强制更新未安装的组件...

它导致我的应用程序锁定了一些时间。你知道我怎么能处理这个警告吗？（如果您需要更多代码或信息，请在帖子中提及。谢谢）

Answer 1

setState操作是异步的，并且为了提高性能而进行批处理。

setState（）不会立即改变this.state但会创建一个待定状态转换。调用后访问this.state 方法可以返回现有值。没有保证调用setState和调用的同步操作为获得业绩增长而受到批评。

在您的情况下，您可能希望确定导航作业将在setState结束时触发：

this.setState（{isModalVisible：false}，（）=＆gt; this.props.navigation.navigate（...））;

＆＃34;警告：只能更新已安装或安装的组件＆＃34;使用Modal时

1 个答案: