Pourquoi est-ce que je reçois l'erreur « Impossible d'effectuer une mise à jour de l'état React sur un composant non monté » et comment puis-je la corriger ?

Comprendre l'erreur « Impossible d'effectuer une mise à jour de l'état de React sur un composant non monté »

Cette erreur se produit lorsque React tente de mettre à jour l'état d'un composant qui a déjà été démonté du DOM. React maintient un indicateur interne pour chaque composant, indiquant s'il est actuellement monté ou non. Si une mise à jour est déclenchée après le démontage d'un composant, React génère cette erreur pour éviter les fuites de mémoire potentielles et tout autre comportement imprévisible.

Identification du composant et de l'événement incriminés

La trace de pile fournie dans votre Le message d'erreur comprend des informations qui peuvent vous aider à identifier le composant incriminé et le gestionnaire d'événements ou le hook de cycle de vie responsable de la mise à jour de l'état. Recherchez la valeur « composant » dans la trace de la pile, car elle doit contenir le nom du composant. De plus, le gestionnaire d'événements ou le hook de cycle de vie spécifique qui a déclenché la mise à jour peut souvent être déduit du nom de la fonction ou du contexte environnant dans le code.

Résoudre le problème

Pour résoudre le problème, vous devez vous assurer que les mises à jour d’état ne sont effectuées que lorsque le composant est encore monté. Voici comment aborder cela :

• Vérifier l'indicateur isMounted : Dans les composants basés sur une classe, vous pouvez créer un indicateur booléen isMounted défini sur false dans composantWillUnmount. Avant d'effectuer une mise à jour de l'état, vérifiez si isMounted est vrai pour vous assurer que le composant est toujours rendu.

  class Component extends React.Component {
    componentWillUnmount() {
      this.isMounted = false;
    }
  
    someMethod() {
      if (this.isMounted) {
        this.setState({ ... });
      }
    }
  }

  Copier après la connexion

• Utiliser le rendu conditionnel : Dans les composants fonctionnels, vous pouvez utilisez le rendu conditionnel pour empêcher le rendu du composant lorsqu'il a été démonté. Enveloppez les mises à jour d'état dans un hook useEffect avec un tableau de dépendances qui inclut un indicateur isMounted.

  const Component = props => {
    const [isMounted, setIsMounted] = React.useState(true);
  
    useEffect(() => {
      return () => setIsMounted(false);
    }, []);
  
    if (!isMounted) return null;
  
    // State updates here...
  };

  Copier après la connexion

• Annuler les fonctions asynchrones : Si la mise à jour de l'état est déclenchée par une opération asynchrone, telle qu'un setTimeout ou un fetch, n'oubliez pas d'annuler l'opération dans le hook de cycle de vie du composantWillUnmount ou dans la fonction de nettoyage du utilisez le crochet d'effet. Cela empêche la mise à jour de l'état après le démontage du composant.

  class Component extends React.Component {
    componentWillUnmount() {
      clearTimeout(this.timeoutId);
    }
  
    componentDidMount() {
      this.timeoutId = setTimeout(() => {
        this.setState({ ... });
      }, 1000);
    }
  }

  Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!