De flesta av de applikationer vi skapar idag konsumerar data från externa källor via API: er. De hämtar data från en server och visar dem i sitt användargränssnitt.

Med hjälp av React kan du skapa en anpassad hook för att hämta data från ett API. Med en URL kommer denna hook att returnera ett objekt som innehåller data och ett valfritt felmeddelande. Du kan sedan använda denna krok i en komponent.

Skapa en Custom React Hook

Börja med att skapa en ny fil som heter useFetch.js. Skapa en funktion som heter useFetch() i den här filen som accepterar en URL-sträng som en parameter.

konst useFetch = (url) => {
}

Kroken ska gör API-anropet direkt efter att den har anropats. Du kan använda useEffect() krok för detta.

För de faktiska API-anropen använder du hämta API. Detta API är ett löftesbaserat gränssnitt som låter dig göra förfrågningar och ta emot svar över HTTP asynkront.

Lägg till följande i useFetch() custom hook.

importera { useEffect, useState } från "reagera";
konst useFetch = (url) => {
konst [data, setdata] = useState(





instagram viewer

null);
konst [loading, setloading] = useState(Sann);
 const [error, seterror] = useState("");


useEffect(() => {
 hämta (url)
 .then((res) => res.json())
 .then((data) => {
seterror(data.fel)
ställa in data(data.skämt)
 setloading(falsk)
 })
 }, [url]);


lämna tillbaka { data, loading, error };
};
exporterastandard useFetch;

I den här kroken initierar du först tillståndet för tre värden:

  • data: Innehåller API-svaret.
  • fel: Innehåller ett felmeddelande om ett fel uppstår.
  • loading: Innehåller ett booleskt värde som indikerar om det har hämtat API-data. Initiera laddningstillståndet till sant. När API: et returnerar data, ställ in den på false.

UseEffect()-kroken tar URL-strängen som ett argument. Detta för att säkerställa att den körs varje gång webbadressen ändras.

Funktionen useFetch() returnerar ett objekt som innehåller data, laddning och felvärden.

Använda en React Custom Hook

För att använda useFetch() anpassade krok som du just skapade, börja med att importera den:

konst useFetch = behöva("./useFetch")

Använd den sedan enligt följande:

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

För att demonstrera, överväg följande skämtkomponent:

konst Skämt = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? typ=singel>";
konst { data, loading, error } = useFetch (url);
om (läser in) lämna tillbaka (
<div>Läser in...</div>
 )


lämna tillbaka (
<div>
 {fel &&<div>{fel}</div>}
 {data &&<div>{<div>{data}</div>}</div>}
</div>
 );
};
exporterastandard Skämt;

Den anropar useFetch()-kroken med URL: en till jokes API och tar emot data, laddning och felvärden.

För att återge Jokes-komponenten, kontrollera först om Loading är sant. Om så är fallet, visa en "Loading..."-sats, annars återge data och eventuella felmeddelanden.

Varför använda Custom React Hooks?

Precis som du använde useFetch() anpassad krok i den här komponenten, kan du återanvända den igen i andra komponenter. Det är det fina med att externisera logiken i krokar istället för att skriva den i varje komponent.

Hooks är en kraftfull funktion i React som du kan använda för att förbättra modulariteten i din kod.