reactjs / reactjs/react.dev

Incorrect referred documentation in fetching with Hooks

Offen
#2,902 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
1 T. 11 Std.
Gemergte PRs (30 T.)
11

Beschreibung

The provided documentation is not accurate because it refers to an article that is not correct based on the eslint(react-hooks/exhaustive-deps) rules.

https://reactjs.org/docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks

Documentation quote:
"How can I do data fetching with Hooks?
Here is a small demo to get you started. To learn more, check out this article about data fetching with Hooks."

Referred Article's URL: https://www.robinwieruch.de/react-hooks-fetch-data
In the provided example we have:

useEffect(async () => {
    const result = await axios(
      'https://hn.algolia.com/api/v1/search?query=redux',
    );
    setData(result.data);
  }, []);

but the rule from eslint(react-hooks/exhaustive-deps) says:

Effect callbacks are synchronous to prevent race conditions. Put the async function inside:

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der Hooks-FAQ-Seite und prüfe den verlinkten Artikel zum Datenabruf. Vergleiche anschließend dessen useEffect-Beispiel mit der in der Issue zitierten eslint(react-hooks/exhaustive-deps)-Anleitung. Die Aufgabe ist erledigt, wenn die Dokumentation die Leser nicht mehr auf ungenaue Anleitungen verweist und das Abrufbeispiel mit der genannten Regel übereinstimmt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.