Existe-t-il un moyen de vérifier si le composant de réaction est démonté?

Question

J'ai un cas d'utilisation où j'ai besoin de démonter mon composant de réaction. Mais dans certains cas, le composant de réaction en question est démonté par une fonction différente. Par conséquent, je dois vérifier si le composant est monté avant de le démonter.

Answer 1

Puisque isMounted() est officiellement déconseillé, vous pouvez le faire dans votre composant:

 componentDidMount() { 
  this._ismounted = true;
}

componentWillUnmount() {
   this._ismounted = false;
}
 

Ce modèle de gestion de votre propre variable state est détaillé dans la documentation de ReactJS: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html

Answer 2

Je pense que Shubham réponse est une solution proposée par réagir pour les personnes qui ont besoin de faire la transition de leur code de cesser d'utiliser le isMounted anti-modèle.

Ce n'est pas nécessairement mauvais, mais Il vaut la peine d'inscription, les vraies solutions à ce problème.

L'article lié par Shubham offre 2 suggestions pour éviter cet anti-modèle. Celui dont vous avez besoin dépend de pourquoi vous appelez setState lorsque le composant est démonté.

si vous utilisez un magasin de Flux dans votre composant, vous devez vous désabonner en componentWillUnmount

class MyComponent extends React.Component {
  componentDidMount() {
    mydatastore.subscribe(this);
  }
  render() {
    ...
  }
  componentWillUnmount() {
    mydatastore.unsubscribe(this);
  }
}

Si vous utilisez ES6 promesses, vous pourriez avoir besoin pour envelopper votre promesse, afin de le rendre résiliables.

const cancelablePromise = makeCancelable(
  new Promise(r => component.setState({...}}))
);

cancelablePromise
  .promise
  .then(() => console.log('resolved'))
  .catch((reason) => console.log('isCanceled', reason.isCanceled));

cancelablePromise.cancel(); // Cancel the promise

Lire plus à propos de makeCancelable dans l'article lié.

En conclusion, n'essayez pas de correctif de ce problème par la définition de variables et de vérifier si le composant est monté, allez à la racine du problème. S'il vous plaît commenter avec les autres communes des cas, si vous pouvez venir avec.

Answer 3

Une autre solution consisterait à utiliser des réf . Si vous utilisez React 16.3+, faites une référence à votre élément de niveau supérieur dans la fonction de rendu.

Ensuite, vérifiez simplement si ref.current est null ou non.

Exemple:

 class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.elementRef = React.createRef();
  }

  checkIfMounted() {
     return this.elementRef.current != null;
  }

  render() {
    return (
      <div ref={this.elementRef} />
    );
  }
}
 

Answer 4

Je suis arrivé ici parce que je cherchais un moyen d'arrêter polling l'API.

Les documents de réaction couvrent le cas websocket , mais pas le cas de polling.

La façon dont j'ai travaillé autour

 // React component

React.createClass({
    poll () {
        if (this.unmounted) {
            return
        }
        // otherwise, call the api
    }
    componentWillUnmount () {
        this.unmounted = true
    }
})
 

Ça marche. J'espère que ça aide

S'il vous plaît, laissez-moi savoir si vous connaissez un cas de test ayant échoué pour ceci =]

Answer 5

j'ai trouvé que le composant sera démonté, générer remplir cette var

 if(!this._calledComponentWillUnmount)this.setState({vars});