De fleste applikasjonene vi lager i dag bruker data fra eksterne kilder gjennom APIer. De henter data fra en server og viser dem i brukergrensesnittet.

Ved å bruke React kan du lage en tilpasset hook for å hente data fra et API. Gitt en URL, vil denne kroken returnere et objekt som inneholder dataene og en valgfri feilmelding. Du kan deretter bruke denne kroken i en komponent.

Opprette en Custom React Hook

Begynn med å lage en ny fil kalt useFetch.js. I denne filen oppretter du en funksjon kalt useFetch() som godtar en URL-streng som en parameter.

konst useFetch = (url) => {
}

Kroken skal foreta API-kallet umiddelbart etter at den er ringt. Du kan bruke useEffect() krok for dette.

For de faktiske API-kallene, bruk hente-APIen. Denne APIen er et løftebasert grensesnitt som lar deg komme med forespørsler og motta svar over HTTP asynkront.

I useFetch() tilpasset krok legger du til følgende.

import { useEffect, useState } fra "reagere";
konst useFetch = (url) => {
konst [data, setdata] = brukState(null);
konst [loading, setloading] = useState(ekte);
 const [feil, seterror] = useState("");



useEffect(() => {
 hente (url)
 .then((res) => res.json())
 .then((data) => {
seterror(data.feil)
angi data(data.vits)
 setloading(falsk)
 })
 }, [url]);


komme tilbake { data, loading, error };
};
eksportmisligholde useFetch;

I denne kroken initialiserer du først tilstanden til tre verdier:

  • data: Beholder API-svaret.
  • feil: Beholder en feilmelding hvis det oppstår en feil.
  • loading: Inneholder en boolsk verdi som indikerer om den har hentet API-dataene. Initialiser innlastingstilstanden til sann. Når API-en returnerer data, setter du den til usann.

UseEffect()-kroken tar URL-strengen som et argument. Dette er for å sikre at den kjører hver gang URL-en endres.

UseFetch()-funksjonen vil returnere et objekt som inneholder data, lasting og feilverdier.

Bruke en React Custom Hook

For å bruke useFetch() egendefinerte kroken du nettopp opprettet, begynner du med å importere den:

konst useFetch = krever("./useFetch")

Bruk den deretter som følger:

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

For å demonstrere, vurder følgende vitser-komponent:

konst Vitser = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? type=single>";
konst { data, loading, error } = useFetch (url);
hvis (laster) komme tilbake (
<div>Laster inn...</div>
 )


komme tilbake (
<div>
 {feil &&<div>{feil}</div>}
 {data &&<div>{<div>{data}</div>}</div>}
</div>
 );
};
eksportmisligholde Vitser;

Den kaller useFetch()-kroken med URL-en til jokes API og mottar data-, lasting- og feilverdier.

For å gjengi Jokes-komponenten, sjekk først om Loading er sant. Hvis det er det, vis en "Loading..."-setning ellers gjengi dataene og feilmeldingen hvis noen.

Hvorfor bruke Custom React Hooks?

Akkurat som du brukte useFetch() tilpasset krok i denne komponenten, kan du gjenbruke den igjen i andre komponenter. Det er det fine med å eksternalisere logikken i kroker i stedet for å skrive den i hver komponent.

Hooks er en kraftig funksjon i React som du kan bruke til å forbedre modulariteten til koden din.