Jak naprawić brakujące ostrzeżenie o zależnościach podczas używania Hooka Reacta useEffect?

Możesz ustawić go bezpośrednio jako useEffect callback:

useEffect(fetchBusinesses, [])

Uruchomi się tylko raz, więc upewnij się, że wszystkie zależności funkcji są prawidłowo ustawione (tak samo jak przy użyciu componentDidMount/componentWillMount...)

Edit 02/21/2020

Tylko dla kompletności:

1. Użyj funkcji jako wywołania zwrotnego useEffect (Jak wyżej)

useEffect(fetchBusinesses, [])

2. Declare function inside useEffect()

useEffect(() => {
  function fetchBusinesses() {
    ...
  }
  fetchBusinesses()
}, [])

3. Memoize with useCallback()

W tym przypadku, jeśli masz zależności w twoja funkcja, będziesz musiał uwzględnić je w tablicy useCallback dependencies i to uruchomi useEffect ponownie, jeśli paramy funkcji ulegną zmianie. Poza tym jest to dużo kotła... Więc po prostu przekaż funkcję bezpośrednio do {[5] } jak w 1. useEffect(fetchBusinesses, []).

const fetchBusinesses = useCallback(() => {
  ...
}, [])
useEffect(() => {
  fetchBusinesses()
}, [fetchBusinesses])

4. Wyłącz Ostrzeżenie eslinta

useEffect(() => {
  fetchBusinesses()
}, []) // eslint-disable-line react-hooks/exhaustive-deps

./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

To nie jest błąd JS/React, ale Ostrzeżenie eslint (eslint-plugin-react-hooks).

Mówi ci, że hook zależy od funkcji fetchBusinesses, więc powinieneś przekazać go jako zależność.

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

Może spowodować wywołanie funkcji przy każdym renderowaniu, jeśli funkcja jest zadeklarowana w komponencie takim jak:

const Component = () => {
  /*...*/

  //new function declaration every render
  const fetchBusinesses = () => {
    fetch('/api/businesses/')
      .then(...)
  }

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

  /*...*/
}

Ponieważ każda funkcja czasowa jest redeclared z nowym odniesieniem

Prawidłowy sposób robienia tego to:

const Component = () => {
  /*...*/

  // keep function reference
  const fetchBusinesses = useCallback(() => {
    fetch('/api/businesses/')
      .then(...)
  }, [/* additional dependencies */]) 

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

  /*...*/
}

Lub po prostu definiowanie funkcji w useEffect

Więcej: https://github.com/facebook/react/issues/14920

Rozwiązanie jest również podane przez Reacta, który radzi ci użyć useCallback, który zwróci wersję memoize twojej funkcji:

Funkcja 'fetchBusinesses' powoduje, że zależności Hooka useEffect (w linii NN) zmieniają się przy każdym renderowaniu. Aby to naprawić, zawiń definicję 'fetchBusinesses' w własną metodę Usecallback () Hook react-hooks/exhaustive-deps

useCallback jest prosty w użyciu, ponieważ ma ten sam podpis co useEffect różnica polega na tym, że useCallback zwraca funkcja. Wyglądałoby to tak:

 const fetchBusinesses = useCallback( () => {
        return fetch("theURL", {method: "GET"}
    )
    .then(() => { /* some stuff */ })
    .catch(() => { /* some error handling */ })
  }, [/* deps */])
  // We have a first effect thant uses fetchBusinesses
  useEffect(() => {
    // do things and then fetchBusinesses
    fetchBusinesses(); 
  }, [fetchBusinesses]);
   // We can have many effect thant uses fetchBusinesses
  useEffect(() => {
    // do other things and then fetchBusinesses
    fetchBusinesses();
  }, [fetchBusinesses]);

Te ostrzeżenia są bardzo pomocne w znajdowaniu komponentów, które nie aktualizują się konsekwentnie: https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies.

Jeśli jednak chcesz usunąć ostrzeżenia w całym projekcie, możesz dodać je do konfiguracji eslint:

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

const [mount, setMount] = useState(false)
const fetchBusinesses = () => { 
   //function defination
}
useEffect(() => {
   if(!mount) {
      setMount(true);
      fetchBusinesses();
   }
},[fetchBusinesses]);

To rozwiązanie jest dość proste i nie trzeba nadpisywać ostrzeżeń es-lint. Wystarczy utrzymać flagę, aby sprawdzić, czy komponent jest zamontowany, czy nie.

Ten artykuł jest dobrym wstępem do pobierania danych za pomocą hooków: https://www.robinwieruch.de/react-hooks-fetch-data/

Zasadniczo, Dołącz definicję funkcji fetch wewnątrz useEffect:

useEffect(() => {
  const fetchBusinesses = () => {
    return fetch("theUrl"...
      // ...your fetch implementation
    );
  }

  fetchBusinesses();
}, []);

Możesz usunąć tablicę typu drugiego argumentu [], ale fetchBusinesses() będzie również wywoływana przy każdej aktualizacji. Możesz dodać IF do implementacji fetchBusinesses(), Jeśli chcesz.

React.useEffect(() => {
  fetchBusinesses();
});

Drugim jest zaimplementowanie funkcji fetchBusinesses() Poza komponentem. Tylko nie zapomnij przekazać argumentów zależności do wywołania fetchBusinesses(dependency), jeśli takie istnieją.

function fetchBusinesses (fetch) {
  return fetch("theURL", { method: "GET" })
    .then(res => normalizeResponseErrors(res))
    .then(res => res.json())
    .then(rcvdBusinesses => {
      // some stuff
    })
    .catch(err => {
      // some error handling
    });
}

function YourComponent (props) {
  const { fetch } = props;

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

  // ...
}

You try this way

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
      });
  };

I

useEffect(() => {
    fetchBusinesses();
  });

useEffect(() => {
        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
      });
  };
        fetchBusinesses();
      }, []);

Jeśli otrzymasz dane na podstawie określonego identyfikatora, Dodaj w callback useEffect [id] to nie możesz wyświetlić Ostrzeżenia React Hook useEffect has a missing dependency: 'any thing'. Either include it or remove the dependency array

Wystarczy przekazać funkcję jako argument w tablicy useEffect...

useEffect(() => {
   functionName()
}, [functionName])

Właściwie ostrzeżenia są bardzo przydatne podczas tworzenia hooków. ale w niektórych przypadkach może cię igiełkować. zwłaszcza, gdy nie trzeba słuchać zmian zależności.

Jeśli nie chcesz umieszczać fetchBusinesses wewnątrz zależności Hooka, możesz po prostu przekazać go jako argument do wywołania zwrotnego Hooka i ustawić główną fetchBusinesses jako domyślną wartość w ten sposób

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

Nie jest to najlepsza praktyka , ale może być przydatna w niektórych przypadkach.

// eslint-disable-next-line react-hooks/exhaustive-deps

Cóż, jeśli chcesz spojrzeć na to inaczej, musisz tylko wiedzieć, jakie są opcje, czy React ma to nie exhaustive-deps? Jednym z powodów, dla których nie powinieneś używać funkcji zamknięcia wewnątrz efektu jest to, że przy każdym renderowaniu zostanie ona ponownie utworzona/zniszczona.

Istnieje więc wiele metod Reactowych w hookach, które są uważane za stabilne i nie wyczerpujące, gdzie nie trzeba stosować zależności useEffect, a z kolei nie będą łamać reguł react-hooks/exhaustive-deps. Na przykład drugi zwraca zmienną useReducer lub useState, która jest funkcją.

const [,dispatch] = useReducer(reducer, {});

useEffect(() => {
    dispatch(); // non-exhausted, eslint won't nag about this
}, []);

Więc z kolei możesz mieć wszystkie zewnętrzne zależności razem z bieżącymi zależnościami współistnieć razem w swojej funkcji reduktora.

const [,dispatch] = useReducer((current, update) => {
    const { foobar } = update;
    // logic

    return { ...current, ...update };
}), {});

const [foobar, setFoobar] = useState(false);

useEffect(() => {
    dispatch({ foobar }); // non-exhausted `dispatch` function
}, [foobar]);

Dodaj ten komentarz na górze pliku, aby wyłączyć ostrzeżenie.

/* eslint-disable react-hooks/exhaustive-deps */

Po prostu wyłącz eslint dla następnej linii;

useEffect(() => {
   fetchBusinesses();
// eslint-disable-next-line
}, []);

W ten sposób używasz go tak, jak komponent montował (nazywany kiedyś)

Zaktualizowano

Lub

const fetchBusinesses = useCallback(() => {
 // your logic in here
 }, [someDeps])

useEffect(() => {
   fetchBusinesses();
// no need to skip eslint warning
}, [fetchBusinesses]); 

FetchBusinesses będą wywoływane za każdym razem, gdy coś się zmieni