Jak naprawić brakujące ostrzeżenie o zależnościach podczas korzystania z hooka reakcji useEffect?

W przypadku React 16.8.6 (było dobrze w poprzedniej wersji 16.8.3), pojawia się ten błąd, gdy próbuję zapobiec nieskończonej pętli w żądaniu pobierania

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

Nie udało mi się znaleźć rozwiązania, które zatrzymałoby nieskończoną pętlę. Chcę trzymać się z daleka od używania useReducer(). Znalazłem tę dyskusję https://github.com/facebook/react/issues/14920, gdzie możliwym rozwiązaniem jest You can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing.brak pewności co do tego, co robię, więc jeszcze nie próbowałem go wdrożyć.

Mam tę bieżącą konfigurację React hook useEffect działa w sposób ciągły w nieskończoność / nieskończoną pętlę, a jedyny komentarz dotyczy tego, z useCallback()którym nie jestem zaznajomiony.

Jak obecnie używam useEffect()(które chcę uruchomić tylko raz na początku, podobnie jak 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
      });
  };

Jeśli nie używasz metody fetchBusinesses nigdzie poza efektem, możesz po prostu przenieść ją do efektu i uniknąć ostrzeżenia

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 jednak używasz fetchBusinesses poza renderowaniem, musisz zwrócić uwagę na dwie rzeczy

1. Czy jest jakiś problem z tym, że nie zdałeś?fetchBusinesses jako metoda, gdy jest używany podczas mocowanie jej zamknięcia otaczającej?
2. Czy twoja metoda zależy od pewnych zmiennych, które otrzymuje z otaczającego ją zamknięcia? To nie dotyczy Ciebie.
3. Przy każdym renderowaniu narzędzie fetchBusinesses zostanie utworzone ponownie, a zatem przekazanie go do metody useEffect spowoduje problemy. Więc najpierw musisz zapamiętać fetchBusinesses, jeśli chcesz przekazać to do tablicy zależności.

Podsumowując, powiedziałbym, że jeśli używasz fetchBusinessespoza useEffectsobą, możesz wyłączyć regułę, w // eslint-disable-next-line react-hooks/exhaustive-depsprzeciwnym razie możesz przenieść metodę wewnątrz useEffect

Aby wyłączyć regułę, napiszesz to jak

useEffect(() => {
   // other code
   ...

   // eslint-disable-next-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-aware-hooks).

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

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

Mogłoby to spowodować wywołanie funkcji przy każdym renderowaniu, jeśli funkcja jest zadeklarowana w komponencie, na przykład:

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

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

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

  /*...*/
}

ponieważ za każdym razem funkcja jest ponownie deklarowana z nowym odniesieniem

Prawidłowy sposób na zrobienie tego to:

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

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

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

  /*...*/
}

lub po prostu definiując funkcję w useEffect

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

Możesz ustawić go bezpośrednio jako useEffectcallback:

useEffect(fetchBusinesses, [])

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

Edycja 21.02.2020

Tylko dla kompletności:

1. Użyj funkcji jako useEffectwywołania zwrotnego (jak wyżej)

useEffect(fetchBusinesses, [])

2. Zadeklaruj funkcję wewnątrz useEffect()

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

3. Zapamiętaj za pomocą useCallback()

W takim przypadku, jeśli masz zależności w swojej funkcji, będziesz musiał uwzględnić je w useCallbacktablicy zależności, a to uruchomi useEffectponownie, jeśli parametry funkcji ulegną zmianie. Poza tym jest dużo schematu ... Więc po prostu przekaż funkcję bezpośrednio do useEffectas in 1. useEffect(fetchBusinesses, []).

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

4. Wyłącz ostrzeżenie eslint

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

Rozwiązaniem jest również reakcja, radzą ci użyć, useCallbackktóra 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” do jej własnego użytku. Callback () Hook reaguje-hooks / wyczerpująco-deps

useCallbackjest prosty w użyciu, ponieważ ma taką samą sygnaturę, jak useEffectróżnica polega na tym, że useCallback zwraca funkcję. 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- zależności .

Jeśli jednak chcesz usunąć ostrzeżenia z całego projektu, możesz dodać to do swojej konfiguracji eslint:

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

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

Zasadniczo dołącz definicję funkcji pobierania do środka useEffect:

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

  fetchBusinesses();
}, []);

Możesz usunąć tablicę typu drugiego argumentu, []ale fetchBusinesses()będzie ona również nazywana każdą aktualizacją. Jeśli chcesz, możesz dodać IFoświadczenie do fetchBusinesses()implementacji.

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

Drugim jest zaimplementowanie fetchBusinesses()funkcji poza komponentem. Po prostu nie zapomnij przekazać wszelkich argumentów zależności do swojego fetchBusinesses(dependency)wywołania, 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]);

  // ...
}

W rzeczywistości ostrzeżenia są bardzo przydatne, gdy rozwijasz się z hakami. ale w niektórych przypadkach może cię zranić. zwłaszcza gdy nie musisz nasłuchiwać zmian zależności.

Jeśli nie chcesz wstawiać fetchBusinesseswewnątrz zależności podpięcia, możesz po prostu przekazać to jako argument do wywołania zwrotnego hooka i ustawić main fetchBusinessesjako wartość domyślną w ten sposób

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

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

Jak napisał Shubnam, możesz dodać poniższy kod, aby powiedzieć ESLint, aby zignorował sprawdzanie twojego hooka.

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

Chcę tylko uruchomić [ fetchBusinesses] raz na początku, podobnie jakcomponentDidMount()

Możesz fetchBusinessescałkowicie wyciągnąć ze swojego komponentu:

const fetchBusinesses = () => { // or pass some additional input from component as args
  return fetch("theURL", { method: "GET" }).then(n => process(n));
};

const Comp = () => {
  React.useEffect(() => {
    fetchBusinesses().then(someVal => {
      // ... do something with someVal
    });
  }, []); // eslint warning solved!
  return <div>{state}</div>;
};

Zapewni to nie tylko proste rozwiązanie i rozwiąże ostrzeżenie wyczerpujące. fetchBusinessteraz można go lepiej przetestować i łatwiejComp , ponieważ znajduje się w zakresie modułu poza drzewem React.

Przeniesienie na fetchBusinesseszewnątrz działa tutaj dobrze, ponieważ i tak bylibyśmy w stanie odczytać tylko początkowe właściwości i stan z komponentu z powodu nieaktualnego zakresu zamknięcia ( []dep in useEffect).

Jak pominąć zależności funkcji

• Przenieś funkcję wewnątrz efektu
• Przenieś funkcję poza komponent - (używamy tego)
• Wywołaj funkcję podczas renderowania i pozwól useEffect zależeć od tej wartości (czysta funkcja obliczeniowa)
• Dodaj funkcję do efektu deps i zawiń ją useCallbackw ostateczności

W przypadku innych rozwiązań:

Wciągnięcie do fetchBusinessesśrodka useEffect()nie pomaga, jeśli uzyskasz dostęp do innego stanu w nim. eslint nadal narzekałby: Codesandbox .

Chciałbym też powstrzymać się od eslint wyczerpującego-deps ignorować komentarze. Po prostu łatwo o nich zapomnieć, dokonując refaktoryzacji i przeglądu swoich zależności.

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

To rozwiązanie jest dość proste i nie ma potrzeby zastępowania ostrzeżeń es-lint. Po prostu utrzymuj flagę, aby sprawdzić, czy komponent jest zamontowany, czy nie.

spróbuj w ten sposób

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

to dla ciebie praca. Ale moja sugestia jest taka, aby spróbować w ten sposób również dla Ciebie. Jest lepiej niż wcześniej. Używam w ten sposób:

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 otrzymujesz dane na podstawie określonego identyfikatora, dodaj wywołanie zwrotne useEffect, [id]a następnie nie możesz pokazać ostrzeżenia React Hook useEffect has a missing dependency: 'any thing'. Either include it or remove the dependency array

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 został zamontowany (wywołany raz)

zaktualizowany

lub

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

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

fetchBusinesses będzie wywoływane za każdym razem, gdy SomeDeps ulegnie zmianie