J'ai un composant enfant qui émet une action vers le composant parent avec un événement :

Composant enfant:

export default function ChildComponent(props) {
  const classes = useStyles();
  const [value, setValue] = React.useState([0, 5]);

  const handleChange = (_, newValue) => {
    setValue(newValue);
    props.updateData(newValue)
  };

  return (
    <div className={classes.root}>
      <GrandSonComponent
        value={value}
        onChange={handleChange}
      />
    </div>
  );
}

Composant parent:

export const ParentComponent = () => {
  const [loading, setLoading] = React.useState(true);
  const { appData, appDispatch } = React.useContext(Context);

  function fetchElements(val) {
    fetchData(val);
  }

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(() => { return fetchData() }, []);

  async function fetchData(params) {
    const res = await axios.get('/url', { params });
    appDispatch({ type: "LOAD_ELEMENTS", elements: res.data });
  }

  return (
    <div>
      <ChildComponent updateData={fetchElements}  />
    <div>
     .
     .
     .
   )
};

Je voudrais savoir comment supprimer cette ligne // eslint-disable-next-line react-hooks/exhaustive-deps

Je dois ajouter cette ligne, car sinon je vois l'erreur eslint :

React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the 
dependency array.eslintreact-hooks/exhaustive-deps

J'ai besoin d'utiliser la fonction fetchData(params) pour la première fois que la page est rendue et lorsque l'utilisateur modifie/cliquez sur la valeur du composant enfant sans avertissements eslit !

Merci!

3
1pct 14 nov. 2020 à 20:30

1 réponse

Meilleure réponse

Tout d'abord, vous n'avez pas besoin de renvoyer le résultat de l'appel de la fonction fetchData() à l'intérieur du hook useEffect.

Venons-en maintenant à votre problème, la raison pour laquelle vous recevez un avertissement est que le fait de manquer les dépendances de useEffect pourrait entraîner des bogues en raison de fermetures. React vous recommande de n'omettre aucune dépendance du crochet useEffect, du crochet useCallback, etc.

Cela conduit parfois à une boucle infinie de mise à jour et de re-rendu de l'état, mais cela peut être évité en utilisant le hook useCallback ou d'autres moyens qui pourraient empêcher le hook useEffect de s'exécuter après chaque re-rendu du composant.

Dans votre cas, vous pouvez résoudre le problème en :

  1. Envelopper la fonction fetchData dans un hook useCallback

    const fetchData = useCallback(async (params) => {
       const res = await axios.get('/url', { params });
       appDispatch({ type: "LOAD_ELEMENTS", elements: res.data });
    }, []);
    
  2. Ajout de fetchData dans le tableau de dépendances du hook useEffect

    useEffect(() => {
        fetchData();
    }, [fetchData]);
    
1
Yousaf 14 nov. 2020 à 17:47