Dauguma šiandien kuriamų programų naudoja duomenis iš išorinių šaltinių per API. Jie gauna duomenis iš serverio ir rodo juos savo vartotojo sąsajoje.

Naudodami React galite sukurti pasirinktinį kabliuką, kad gautumėte duomenis iš API. Suteikus URL, šis kabliukas pateiks objektą su duomenimis ir pasirenkamą klaidos pranešimą. Tada galite naudoti šį kabliuką komponente.

Pasirinktinio reagavimo kablio kūrimas

Pradėkite sukurdami naują failą, pavadintą useFetch.js. Šiame faile sukurkite funkciją, vadinamą useFetch(), kuri priima URL eilutę kaip parametrą.

konst useFetch = (url) => {
}

Kabliukas turėtų paskambinti API iškart po to, kai jam paskambins. Galite naudoti useEffect() kabliukas už tai.

Tikriems API iškvietimams naudokite gavimo API. Ši API yra pažadais pagrįsta sąsaja, leidžianti asinchroniškai pateikti užklausas ir gauti atsakymus per HTTP.

Į „useFetch()“ tinkintą kabliuką pridėkite šiuos dalykus.

importuoti { useEffect, useState } iš „reaguoti“;
konst useFetch = (url) => {
konst [data, setdata] = useState(





instagram viewer

nulinis);
konst [įkrovimas, įkėlimas] = useState(tiesa);
 const [klaida, seterror] = useState("");


useEffect(() => {
 gauti (url)
 .then((res) => res.json())
 .ten((duomenys) => {
seteroras(duomenis.klaida)
nustatyti duomenys(duomenis.pokštas)
 setloading (klaidinga)
 })
 }, [url]);


grąžinti { duomenys, įkeliama, klaida };
};
eksportuotinumatytas useFetch;

Šiuo kabliu pirmiausia inicijuojate trijų reikšmių būseną:

  • duomenys: saugo API atsakymą.
  • klaida: išsaugo klaidos pranešimą, jei įvyksta klaida.
  • įkėlimas: saugo loginę reikšmę, kuri nurodo, ar ji gavo API duomenis. Inicijuoti įkėlimo būseną į true. Kai API grąžins duomenis, nustatykite jį į false.

Kabliukas useEffect() naudoja URL eilutę kaip argumentą. Taip siekiama užtikrinti, kad jis būtų vykdomas kiekvieną kartą, kai pasikeičia URL.

Funkcija useFetch() grąžins objektą su duomenų, įkėlimo ir klaidų reikšmėmis.

„React Custom Hook“ naudojimas

Norėdami naudoti ką tik sukurtą tinkintą „useFetch() kabliuką, pradėkite jį importuodami:

konst useFetch = reikalauti(./useFetch)

Tada naudokite taip:

konst {duomenys, įkeliama, klaida} = useFetch (url)

Norėdami parodyti, apsvarstykite šį anekdotų komponentą:

konst Anekdotai = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? tipas=vienvietis>";
konst { duomenys, įkeliama, klaida } = useFetch (url);
jeigu (kraunama) grąžinti (
<div>Įkeliama...</div>
 )


grąžinti (
<div>
 {klaida &&<div>{error}</div>}
 {duomenys &&<div>{<div>{duomenys}</div>}</div>}
</div>
 );
};
eksportuotinumatytas Anekdotai;

Jis iškviečia useFetch() kabliuką su URL į juokelių API ir gauna duomenų, įkėlimo ir klaidų reikšmes.

Norėdami pateikti anekdotų komponentą, pirmiausia patikrinkite, ar įkeliama tiesa. Jei taip, parodykite teiginį „Įkeliama…“, kitaip pateikiami duomenys ir klaidos pranešimas, jei toks yra.

Kodėl verta naudoti pritaikytus reagavimo kabliukus?

Lygiai taip pat, kaip šiame komponente naudojote pasirinktinį kabliuką useFetch(), galite jį vėl naudoti kituose komponentuose. Tai yra logikos išorinio panaudojimo kabliuose grožis, užuot įrašius ją kiekviename komponente.

Kabliukai yra galinga „React“ funkcija, kurią galite naudoti norėdami pagerinti savo kodo moduliškumą.