javascript - setState 和 setInterval 导致 "Warning: Can only update a mount or mounting component."

Question

我对 setState 和 setInterval 有一个奇怪的问题。当我一起使用它们时，会出现以下警告:

Warning: Can only update a mount or mounting component. This usually means you called setState, replaceState or forceUpdate on an unmounted component. This is a no-op.

此警告在 Android 中没有问题，并且没有任何缺点。但是，在 ISO 中，它会随机导致应用程序卡住!这是我的代码:

我有一个按钮，每当我触摸它时，它应该使模式打开(真)，10 秒后它应该关闭(假)，然后重定向到另一个页面。这是按钮的代码:

 onPressEnter() {
    this.setState({ isModalVisible: true);
        if(this.timer > 0) return;
                    this.timer = setTimeout(() => {
                      //turn off the pop up
                      this.setState({ isModalVisible: false });
                      this.props.navigation.navigate('ParkInBuilding', {user: this.state.passedProps.user,  pState:this.state.passedProps.pState, pState: this.state.passedProps.pState, actSection: 'finalpage_2A'});
                      this.timer = null;  //not necessary if you are unmounting the component
                    }, 10000);
 }

在 render() 中，我有一个模态如下:

          <Modal isVisible={this.state.isModalVisible}>
              <View style={styles.timerContainer}>
              <Text style={styles.orangeTextBold}>Si prega di passare il{"\n"}cancello di entrata.
              <Text style={styles.itemBold}>{"\n"} </Text>
              <Text style={styles.itemBold}>{"\n"}Benvenuto nel Parcheggio {this.state.parkingname}{"\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 style={ styles.buttonContainer } >
        <Button_yellow  style={styles.buttonW}  onPress={ this.onPressEnter.bind(this)}  label="              Entra              " icon="Mirino_giallo"  />
        </View>

问题是当我将 this.setState({ isModalVisible: false}); 放入 setTimeout() 时，提到的警告随机出现。 (有时我有它并且应用程序卡住，有时它工作正常)你能帮我解决这个问题吗？困扰了我一个星期!谢谢。

Answer 1

您可以在更新状态后使用 setState 回调进行导航:

this.setState({ isModalVisible: false }, () => this.props.navigation.navigate(...));