web-dev-qa-db-fra.com

Comment corriger l'avertissement de dépendance manquant lors de l'utilisation de useEffect React Hook?

Avec React 16.8.6 (c'était bien sur la version précédente 16.8.3), j'obtiens cette erreur lorsque j'essaie d'empêcher une boucle infinie sur une demande de récupération

./src/components/BusinessesList.js
Line 51:  React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array  react-hooks/exhaustive-deps

Je n'ai pas pu trouver de solution qui arrête la boucle infinie. Je veux éviter d'utiliser useReducer(). J'ai trouvé cette discussion https://github.com/facebook/react/issues/1492 où une solution possible est You can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing. Je ne suis pas sûr de ce que je fais Je n'ai pas encore essayé de l'implémenter.

J'ai cette configuration actuelle React hook hook useEffect fonctionne en continu pour toujours/boucle infinie et le seul commentaire concerne useCallback() que je ne connais pas.

Comment j'utilise actuellement useEffect() (que je ne veux exécuter qu'une seule fois au début, semblable à componentDidMount())

useEffect(() => {
    fetchBusinesses();
  }, []);

const fetchBusinesses = () => {
    return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  };
reactjseslintcreate-react-appreact-hooks
125
russ

Ces avertissements sont très utiles pour trouver des composants qui ne sont pas mis à jour de manière cohérente: https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the- liste des dépendances .

Cependant, si vous souhaitez supprimer les avertissements tout au long de votre projet, vous pouvez l'ajouter à votre configuration eslint:

  {
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/exhaustive-deps": 0
    }
  }
0
Jordan Daniels

En fait, les avertissements sont très utiles lorsque vous développez avec des crochets. mais dans certains cas, cela peut vous piéger. surtout lorsque vous n'avez pas besoin d'écouter les changements de dépendances.

Si vous ne voulez pas mettre fetchBusinesses à l'intérieur des dépendances du hook, vous pouvez simplement le passer comme argument au rappel du hook et définir le fetchBusinesses principal comme valeur par défaut pour cela comme ceci

useEffect((fetchBusinesses = fetchBusinesses) => {
   fetchBusinesses();
}, []);

Ce n'est pas la meilleure pratique mais cela pourrait être utile dans certains cas.

De plus, comme Shubnam l'a écrit, vous pouvez ajouter du code ci-dessous pour dire à ESLint d'ignorer la vérification de votre hook.

// eslint-disable-next-line react-hooks/exhaustive-deps
0
Behnam Azimi