De fleste af de applikationer, vi skaber i dag, bruger data fra eksterne kilder gennem API'er. De henter data fra en server og viser dem i deres brugergrænseflade.

Ved hjælp af React kan du oprette en tilpasset hook til at hente data fra en API. Givet en URL, vil denne hook returnere et objekt, der indeholder dataene og en valgfri fejlmeddelelse. Du kan derefter bruge denne krog i en komponent.

Oprettelse af en Custom React Hook

Begynd med at oprette en ny fil kaldet useFetch.js. I denne fil skal du oprette en funktion kaldet useFetch(), der accepterer en URL-streng som en parameter.

konst useFetch = (url) => {
}

Krogen skal foretage API-kaldet umiddelbart efter den er ringet op. Du kan bruge useEffect() hook for det.

Til de faktiske API-kald skal du bruge hente-API'en. Denne API er en løftebaseret grænseflade, der giver dig mulighed for at lave anmodninger og modtage svar over HTTP asynkront.

Tilføj følgende i useFetch() custom hook.

importere { useEffect, useState } fra "reagere";
konst useFetch = (url) => {

konst [data, sætdata] = useState(nul);
konst [loading, setloading] = useState(rigtigt);
 const [fejl, seterror] = useState("");


useEffect(() => {
 hente (url)
 .then((res) => res.json())
 .then((data) => {
seterror(data.fejl)
sæt data(data.joke)
 setloading(falsk)
 })
 }, [url]);


Vend tilbage { data, indlæsning, fejl };
};
eksportStandard useFetch;

I denne krog initialiserer du først tilstanden af ​​tre værdier:

  • data: Indeholder API-svaret.
  • fejl: Indeholder en fejlmeddelelse, hvis der opstår en fejl.
  • loading: Indeholder en boolesk værdi, der angiver, om den har hentet API-dataene. Initialiser indlæsningstilstanden til sand. Når API'en returnerer data, skal du indstille dem til falsk.

useEffect()-krogen tager URL-strengen som et argument. Dette er for at sikre, at den kører, hver gang URL'en ændres.

Funktionen useFetch() returnerer et objekt, der indeholder data, indlæsning og fejlværdier.

Brug af en React Custom Hook

For at bruge useFetch() brugerdefinerede hook, du lige har oprettet, skal du begynde med at importere den:

konst useFetch = kræve("./useFetch")

Brug det derefter som følger:

konst {data, loading, error} = useFetch (url)

For at demonstrere skal du overveje følgende Jokes-komponent:

konst Jokes = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? type=enkelt>";
konst { data, loading, error } = useFetch (url);
hvis (Indlæser) Vend tilbage (
<div>Indlæser...</div>
 )


Vend tilbage (
<div>
 {fejl &&<div>{fejl}</div>}
 {data &&<div>{<div>{data}</div>}</div>}
</div>
 );
};
eksportStandard Vittigheder;

Det kalder useFetch() hook med URL'en til jokes API og modtager data, indlæsning og fejlværdier.

For at gengive Jokes-komponenten skal du først kontrollere, om Loading er sand. Hvis det er det, skal du vise en "Loading..."-erklæring ellers gengive data og fejlmeddelelser, hvis nogen.

Hvorfor bruge Custom React Hooks?

Ligesom du brugte useFetch() brugerdefinerede hook i denne komponent, kan du genbruge den igen i andre komponenter. Det er det smukke ved at eksternalisere logikken i kroge i stedet for at skrive den i hver komponent.

Hooks er en kraftfuld funktion i React, som du kan bruge til at forbedre modulariteten af ​​din kode.