Die meisten Anwendungen, die wir heute erstellen, nutzen Daten aus externen Quellen über APIs. Sie rufen Daten von einem Server ab und zeigen sie in ihrer Benutzeroberfläche an.

Mit React können Sie einen benutzerdefinierten Hook erstellen, um Daten von einer API abzurufen. Bei gegebener URL gibt dieser Hook ein Objekt zurück, das die Daten und eine optionale Fehlermeldung enthält. Sie können diesen Hook dann in einer Komponente verwenden.

Erstellen eines benutzerdefinierten Reaktionshakens

Erstellen Sie zunächst eine neue Datei namens useFetch.js. Erstellen Sie in dieser Datei eine Funktion namens useFetch(), die einen URL-String als Parameter akzeptiert.

konst useFetch = (url) => {
}

Der Haken sollte Führen Sie den API-Aufruf durch unmittelbar nach dem Aufruf. Du kannst den... benutzen useEffect()-Hook dafür.

Verwenden Sie für die eigentlichen API-Aufrufe die Abruf-API. Diese API ist eine Promise-basierte Schnittstelle, die es Ihnen ermöglicht, Anfragen zu stellen und Antworten über HTTP asynchron zu empfangen.

instagram viewer

Fügen Sie im benutzerdefinierten Hook useFetch() Folgendes hinzu.

importieren { useEffect, useState } aus "reagieren";
konst useFetch = (url) => {
konst [Daten, Setdata] = useState(Null);
konst [laden, setloaden] = useState(Stimmt);
 const [Fehler, seterror] = useState("");


useEffect(() => {
 abrufen (URL)
 .then((res) => res.json())
 .dann((daten) => {
Setfehler(Daten.Error)
setdata(Daten.scherzen)
 Satz laden (FALSCH)
 })
 }, [URL]);


Rückkehr {Daten, Laden, Fehler};
};
ExportUrsprünglich useFetch;

In diesem Hook initialisieren Sie zuerst den Status von drei Werten:

  • data: Enthält die API-Antwort.
  • error: Enthält eine Fehlermeldung, wenn ein Fehler auftritt.
  • loading: Enthält einen booleschen Wert, der angibt, ob die API-Daten abgerufen wurden. Initialisieren Sie den Ladezustand auf wahr. Sobald die API Daten zurückgibt, setzen Sie sie auf „false“.

Der Hook useEffect() nimmt den URL-String als Argument. Dadurch wird sichergestellt, dass es jedes Mal ausgeführt wird, wenn sich die URL ändert.

Die Funktion useFetch() gibt ein Objekt zurück, das die Daten-, Lade- und Fehlerwerte enthält.

Verwenden eines benutzerdefinierten React-Hooks

Um den soeben erstellten benutzerdefinierten useFetch()-Hook zu verwenden, importieren Sie ihn zunächst:

konst useFetch = benötigen("./useFetch")

Dann verwenden Sie es wie folgt:

konst {Daten, Laden, Fehler} = useFetch (URL)

Betrachten Sie zur Veranschaulichung die folgende Jokes-Komponente:

konst Witze = () => {
 Konstante URL = "<https://sv443.net/jokeapi/v2/joke/Programming? typ=einzeln>";
konst {Daten, Laden, Fehler} = useFetch (url);
wenn (Wird geladen) Rückkehr (
<div>Wird geladen...</div>
 )


Rückkehr (
<div>
 {Error &&<div>{Error}</div>}
 {Daten &&<div>{<div>{Daten}</div>}</div>}
</div>
 );
};
ExportUrsprünglich Witze;

Es ruft den Hook useFetch() mit der URL zur Witze-API auf und empfängt die Daten-, Lade- und Fehlerwerte.

Um die Jokes-Komponente zu rendern, überprüfen Sie zunächst, ob Loading wahr ist. Wenn dies der Fall ist, zeigen Sie eine „Loading…“-Anweisung an, andernfalls rendern Sie die Daten und Fehlermeldungen, falls vorhanden.

Warum benutzerdefinierte Reaktionshaken verwenden?

So wie Sie den benutzerdefinierten useFetch()-Hook in dieser Komponente verwendet haben, können Sie ihn auch in anderen Komponenten wiederverwenden. Das ist das Schöne daran, die Logik in Hooks zu externalisieren, anstatt sie in jede Komponente zu schreiben.

Hooks sind eine leistungsstarke Funktion von React, mit der Sie die Modularität Ihres Codes verbessern können.