ComponentWillUnmount () n'est pas appelé lors de l'actualisation de la page en cours

J'ai eu ce problème où mon code dans le componentDidMount() méthode n'était pas de tir correctement lors de l'actualisation de la page en cours (et par la suite, la composante). Cependant, il fonctionne parfaitement bien juste de la navigation et de routage par le biais de mon site internet en cliquant sur des liens. Actualiser la page en cours? Pas un hasard.

J'ai découvert que le problème est que componentWillUnmount() ne déclenche pas lorsque j'actualise la page et déclenche amende de cliquer sur des liens et de la navigation de mon site web/app.

Le déclenchement de la componentWillUnmount() est crucial pour mon application, puisque les données que j'ai charger et de processus dans le componentDidMount() méthode est très importante dans l'affichage des informations pour les utilisateurs.

J'ai besoin de la componentWillUnmount() d'être appelé lors de l'actualisation de la page, car dans mon componentWillMount() fonction (qui a besoin de re-rendre après chaque actualisation) je fais un peu de filtrage simple et stocker cette variable à une valeur de l'état, qui doit être présent dans le logos variable d'état pour le reste du composant de travail. Cela ne change pas ou recevoir de nouvelles valeurs à tout moment au cours de la composante du cycle de vie.

componentWillMount(){
  if(dataReady.get(true)){
    let logos = this.props.questions[0].data.logos.length > 0 ? this.props.questions[0].data.logos.filter((item) => {
      if(item.logo === true && item.location !== ""){
        return item;
      }
    }) : [];
    this.setState({logos: logos});
  }
};

Falaises:

Je ne DB filtrage dans componentWillMount()méthode
Besoin d'être présent dans le composant après l'actualisation
Mais j'ai un problème lorsque le componentWillUnmount() ne déclenche pas lorsque la page est actualisée
Besoin d'aide
Veuillez

source d'informationauteur Mabeh Al-Zuq Yadeek

reactjs

Lors de l'actualisation de la page réagir, de ne pas avoir la chance de démonter les composants comme d'habitude. Utiliser le window.onbeforeunload événement pour définir un gestionnaire pour l'actualisation (lire les commentaires dans le code):

class Demo extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.componentCleanup = this.componentCleanup.bind(this);
    }

    componentCleanup() { //this will hold the cleanup code
        //whatever you want to do when the component is unmounted or page refreshes
    }

    componentWillMount(){
      if(dataReady.get(true)){
        let logos = this.props.questions[0].data.logos.length > 0 ? this.props.questions[0].data.logos.filter((item) => {
          if(item.logo === true && item.location !== ""){
            return item;
          }
        }) : [];

        this.setState({ logos });
      }
    }

    componentDidMount(){
      window.addEventListener('beforeunload', this.componentCleanup);
    }

    componentWillUnmount() {
        this.componentCleanup();
        window.removeEventListener('beforeunload', this.componentCleanup); //remove the event handler for normal unmounting
    }

}

0

Je vois que cette question a plus d'un millier de points de vue, donc je vais vous expliquer comment j'ai résolu ce problème:

Pour résoudre ce problème particulier, la façon la plus sensée est de créer un niveau supérieur composant de chargement de votre abonnement ou de base de données, de sorte que vous chargez les données nécessaires avant de le transmettre à votre enfant, ce qui permettrait de supprimer complètement le besoin d'utiliser componentWillMount(). Aussi, vous pouvez faire les calculs dans la partie supérieure de niveau composant et juste à les transmettre que les accessoires à utiliser dans votre réception de composant

Par exemple:
```
class UpperLevelComponent extends React.Component {

render() {
if(this.props.isReady) {
return(<ChildComponent {...props}/>)
}
}
}

export default createContainer(() => {
const data = Meteor.subscribe("myData");
const isReady = data.ready();

return {
isReady,
data: MyData.find.fetch()
}
})
```
Dans l'exemple ci-dessus, j'utilise de Meteor réactif conteneur pour obtenir mon MongoDB données et d'attendre que ça complètement fini l'abonnement avant de rendre le composant enfant, en lui passant tous les accessoires que je veux. Si vous chargez toutes vos données dans le composant de niveau supérieur, vous n'aurez pas à compter sur la componentWillMount() méthode pour déclencher après chaque actualisation. Les données seront prêtes dans le niveau supérieur, composant, de sorte que vous pouvez l'utiliser autant que vous le souhaitez dans le composant enfant.

Vous devez vous connecter pour publier un commentaire.