De meeste applicaties die we tegenwoordig maken, verbruiken gegevens van externe bronnen via API's. Ze halen gegevens op van een server en geven deze weer in hun gebruikersinterface.

Met React kun je een aangepaste hook maken om gegevens van een API op te halen. Gegeven een URL, retourneert deze hook een object met de gegevens en een optioneel foutbericht. Deze haak kun je vervolgens in een component gebruiken.

Een aangepaste reactiehaak maken

Begin met het maken van een nieuw bestand met de naam useFetch.js. Maak in dit bestand een functie met de naam useFetch() die een URL-tekenreeks als parameter accepteert.

const useFetch = (url) => {
}

De haak moet doe de API-aanroep onmiddellijk nadat het is gebeld. U kunt de useEffect() haak voor deze.

Gebruik voor de daadwerkelijke API-aanroepen de fetch-API. Deze API is een op beloften gebaseerde interface waarmee u asynchroon verzoeken kunt doen en antwoorden kunt ontvangen via HTTP.

Voeg in de useFetch() aangepaste hook het volgende toe.

importeren { useEffect, useState } 





instagram viewer


van "Reageer";
const useFetch = (url) => {
const [data, setdata] = useState(nul);
const [loading, setloading] = useState(WAAR);
 const [fout, seterror] = useState("");


gebruikEffect(() => {
 ophalen (url)
 .then((res) => res.json())
 .then((gegevens) => {
seterror(gegevens.fout)
setdata(gegevens.grap)
 setloaden(vals)
 })
 }, [url]);


opbrengst { gegevens, laden, fout };
};
exporterenstandaard gebruikFetchen;

In deze hook initialiseer je eerst de status van drie waarden:

  • data: bevat het API-antwoord.
  • error: Bevat een foutmelding als er een fout optreedt.
  • laden: bevat een booleaanse waarde die aangeeft of het de API-gegevens heeft opgehaald. Initialiseer de laadstatus op true. Zodra de API gegevens retourneert, stelt u deze in op false.

De hook useEffect() neemt de URL-tekenreeks als argument. Dit is om ervoor te zorgen dat het elke keer dat de URL verandert, wordt uitgevoerd.

De functie useFetch() retourneert een object dat de waarden voor gegevens, laden en fouten bevat.

Een React Custom Hook gebruiken

Om de useFetch() aangepaste hook te gebruiken die je zojuist hebt gemaakt, begin je met het importeren:

const useFetch = vereisen("./useFetch")

Gebruik het dan als volgt:

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

Overweeg om dit te demonstreren de volgende grappencomponent:

const Grappen = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? type=single>";
const { data, laden, fout } = useFetch (url);
als (bezig met laden) opbrengst (
<div>Bezig met laden...</div>
 )


opbrengst (
<div>
 {fout &&<div>{fout}</div>}
 {gegevens &&<div>{<div>{gegevens}</div>}</div>}
</div>
 );
};
exporterenstandaard grappen;

Het roept de useFetch()-hook aan met de URL naar de API voor grappen en ontvangt de gegevens, laad- en foutwaarden.

Om de component Jokes weer te geven, controleert u eerst of Loading waar is. Als dit het geval is, geeft u de instructie "Bezig met laden ..." weer, anders geeft u de gegevens en het eventuele foutbericht weer.

Waarom aangepaste reactiehaken gebruiken?

Net zoals u de aangepaste hook useFetch() in deze component hebt gebruikt, kunt u deze opnieuw gebruiken in andere componenten. Dat is het mooie van het externaliseren van de logica in hooks in plaats van het in elk onderdeel te schrijven.

Hooks zijn een krachtige functie van React die je kunt gebruiken om de modulariteit van je code te verbeteren.