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

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

Problème

Quand en travaillant avec React, il est possible de rencontrer le message d'erreur « Impossible d'effectuer une mise à jour de l'état React sur un composant non monté ». Cette erreur se produit généralement lorsque vous tentez de mettre à jour l'état d'un composant après son démontage du DOM.

Identification du composant incriminé

À partir de la trace de la pile, vous pouvez identifier le composant responsable de l'erreur en remontant la pile d'appels pour trouver le composant qui a appelé setState(...) après son démontage. Le composant incriminé sera répertorié dans la trace de la pile sous le nom ComponentName.prototype.setState.

Résoudre le problème

Pour corriger cette erreur, vous pouvez adopter plusieurs approches :

1. Annuler les tâches asynchrones : Si vous avez des tâches asynchrones, tels que les récupérations ou les délais d'attente, exécutés dans le composant, annulez-les dans la méthode composantWillUnmount. Ces tâches peuvent continuer à s'exécuter une fois le composant démonté, ce qui entraîne des mises à jour d'état sur un composant démonté.
2. Mises à jour de l'état de garde : Enveloppez les mises à jour d'état dans une vérification conditionnelle qui garantit que le composant est toujours monté avant de mettre à jour son état. Par exemple :

if (this.isMounted) {
  this.setState({ ... });
}

3. Utiliser React Hooks : Si vous utilisez React Hooks, vous pouvez utiliser une fonction de nettoyage dans le hook useEffect pour annuler tout événement asynchrone. tâches et activer un indicateur de montage. Cela garantit que les mises à jour d'état ne se produisent que lorsque le composant est monté.

Exemple (React Hooks)

useEffect(() => {
  let isMounted = true;
  const fetchData = async () => {
    try {
      const data = await fetch('...');
      if (isMounted) setState(data);
    } catch (error) {
      console.error(error);
    }
  };
  fetchData();
  return () => { isMounted = false; };
}, []);

En implémentant l'une de ces approches, vous peut éviter l'erreur « Impossible d'effectuer une mise à jour de l'état React sur un composant non monté » et garantir que la gestion de votre état est cohérente avec le cycle de vie du composant.

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!