Većina aplikacija koje danas stvaramo koristi podatke iz vanjskih izvora putem API-ja. Dohvaćaju podatke s poslužitelja i prikazuju ih u svom korisničkom sučelju.

Koristeći React, možete stvoriti prilagođenu kuku za dohvaćanje podataka iz API-ja. S obzirom na URL, ova kuka će vratiti objekt koji sadrži podatke i neobaveznu poruku o pogrešci. Zatim možete koristiti ovu kuku u komponenti.

Stvaranje prilagođene React kuke

Započnite stvaranjem nove datoteke pod nazivom useFetch.js. U ovoj datoteci stvorite funkciju pod nazivom useFetch() koja prihvaća URL niz kao parametar.

konst useFetch = (url) => {
}

Udica treba uputiti API poziv odmah nakon poziva. Možete koristiti useEffect() kuka za ovo.

Za stvarne API pozive koristite fetch API. Ovaj API je sučelje temeljeno na obećanjima koje vam omogućuje asinkrono slanje zahtjeva i primanje odgovora putem HTTP-a.

U prilagođenu kuku useFetch() dodajte sljedeće.

uvoz {useEffect, useState} iz "reagirati";
konst useFetch = (url) => {
konst [podaci, setpodataka] = useState(





instagram viewer

ništavan);
konst [učitavanje, postavljanje učitavanja] = useState(pravi);
 const [greška, seterror] = useState("");


useEffect(() => {
 dohvaćanje (url)
 .then((res) => res.json())
 .then((podaci) => {
seterror(podaci.pogreška)
setpodataka(podaci.vic)
 setloading(lažno)
 })
 }, [url]);


povratak { podaci, učitavanje, greška };
};
izvozzadano useFetch;

U ovoj kuki prvo inicijalizirate stanje tri vrijednosti:

  • podaci: Sadržava API odgovor.
  • pogreška: sadrži poruku o pogrešci ako se pogreška pojavi.
  • učitavanje: Sadrži Booleovu vrijednost koja pokazuje je li dohvatio API podatke. Inicijalizirajte stanje učitavanja na istinito. Nakon što API vrati podatke, postavite ga na false.

UseEffect() kuka uzima URL niz kao argument. Ovo je kako bi se osiguralo pokretanje svaki put kada se promijeni URL.

Funkcija useFetch() vratit će objekt koji sadrži podatke, vrijednosti učitavanja i pogreške.

Korištenje React prilagođene kuke

Da biste koristili prilagođenu kuku useFetch() koju ste upravo stvorili, započnite s uvozom:

konst useFetch = zahtijevati("./useFetch")

Zatim ga upotrijebite na sljedeći način:

konst {podaci, učitavanje, pogreška} = useFetch (url)

Za demonstraciju, razmotrite sljedeću komponentu šala:

konst Vicevi = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? vrsta=single>";
konst { podaci, učitavanje, pogreška } = useFetch (url);
ako (Učitavam) povratak (
<div>Učitavam...</div>
 )


povratak (
<div>
 {greška &&<div>{greška}</div>}
 {podaci &&<div>{<div>{podaci}</div>}</div>}
</div>
 );
};
izvozzadano šale;

Poziva useFetch() kuku s URL-om za jokes API i prima podatke, učitavanje i vrijednosti pogreške.

Da biste prikazali komponentu Šale, prvo provjerite je li Učitavanje istinito. Ako jest, prikažite naredbu "Učitavanje..." inače prikazajte podatke i poruku o pogrešci ako ih ima.

Zašto koristiti prilagođene React kuke?

Baš kao što ste upotrijebili prilagođenu kuku useFetch() u ovoj komponenti, možete je ponovo upotrijebiti u drugim komponentama. To je ljepota eksternalizacije logike u udicama umjesto da se zapisuje u svakoj komponenti.

Hookovi su moćna značajka Reacta koju možete koristiti za poboljšanje modularnosti svog koda.