Question

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

警告：只能更新安装或安装组件。这通常表示您在已卸载时调用了setState，replaceState或forceUpdate 零件。这是一个无操作。

此警告在Android中很好，并且没有任何缺点。但是，在ISO中它会导致应用程序中的冻结！这是我的代码：

我有一个按钮，每当我触摸它时，它应该打开一个模态（true），10秒后它应该关闭（false）然后重定向到另一个页面。这是按钮的代码：

 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(...));

Answer 2

向Dyo answere添加解释：

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

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

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

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

setState和setInterval导致“警告：只能更新安装或安装组件”。

2 个答案: