setState et setInterval provoquent "Warning : Ne peut mettre à jour qu'un montage ou un composant de montage."

Question

J'ai un problème étrange avec setState et setInterval. Lorsque je les utilise ensemble, le problème suivant apparaît :

Avertissement : Ne peut mettre à jour qu'une monture ou un composant de montage. [ ] que vous avez appelé setState, replaceState ou forceUpdate sur un composant non monté. non monté. Ce n'est pas une option.

Cet avertissement fonctionne parfaitement sous Android et ne présente aucun inconvénient. Cependant, dans ISO, il provoque un gel de l'application de manière aléatoire ! Voici mon code :

J'ai un bouton qui, chaque fois que je le touche, doit activer une fenêtre modale (true) et, après 10 secondes, la désactiver (false) et rediriger vers une autre page. Voici le code du bouton :

 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);
 }

En render() J'ai une fenêtre modale comme ci-dessous :

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

Le bouton :

  <View style={ styles.buttonContainer } >
        <Button_yellow  style={styles.buttonW}  onPress={ this.onPressEnter.bind(this)}  label="              Entra              " icon="Mirino_giallo"  />
        </View>

Le problème est que, comme je l'ai dit this.setState({ isModalVisible: false}); dans le setTimeout() Je n'ai pas eu le temps de m'en rendre compte, la panne mentionnée se produit de manière aléatoire (parfois je l'ai et l'application se bloque, parfois elle fonctionne correctement). Pouvez-vous m'aider à résoudre ce problème ? Cela m'a ennuyé pendant une semaine ! Je vous remercie.

Answer 1

Vous pouvez utiliser le setState callback à naviguer après la mise à jour de l'état :

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

Answer 2

Complément d'explication à la réponse de Dyo :

Les actions setState sont asynchrones et sont regroupées en lots pour améliorer les performances.

setState() ne modifie pas immédiatement this.state mais crée un état transition d'état en attente. L'accès à this.state après l'appel à cette méthode peut potentiellement renvoyer la valeur existante. Il n'y a pas de Il n'y a pas de garantie de synchronisation des appels à setState et les appels peuvent être regroupés pour des raisons de performance. être regroupés en lots pour améliorer les performances.

Dans votre cas, vous voudrez peut-être être certain que votre tâche de navigation sera déclenchée à la fin de votre setState :

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