Suurin osa nykyään luomistamme sovelluksista kuluttaa tietoja ulkoisista lähteistä sovellusliittymien kautta. He hakevat tietoja palvelimelta ja näyttävät sen käyttöliittymässä.

Reactin avulla voit luoda mukautetun koukun tietojen hakemiseksi API: sta. Kun URL-osoite on annettu, tämä koukku palauttaa objektin, joka sisältää tiedot ja valinnaisen virheilmoituksen. Voit sitten käyttää tätä koukkua komponentissa.

Mukautetun reagointikoukun luominen

Aloita luomalla uusi tiedosto useFetch.js. Luo tähän tiedostoon funktio nimeltä useFetch(), joka hyväksyy URL-merkkijonon parametriksi.

konst useFetch = (url) => {
}

Koukun pitäisi soita API-kutsu heti soiton jälkeen. Voit käyttää useEffect()-koukku tätä varten.

Käytä varsinaisiin API-kutsuihin hakemissovellusliittymää. Tämä API on lupauspohjainen käyttöliittymä, jonka avulla voit tehdä pyyntöjä ja vastaanottaa vastauksia HTTP: n kautta asynkronisesti.

Lisää mukautettuun useFetch()-koukkuun seuraava.

tuonti { useEffect, useState } alkaen "reagoi";
konst useFetch = (url) => {

konst [data, setdata] = useState(tyhjä);
konst [loading, setloading] = useState(totta);
 const [error, seterror] = useState("");


useEffect(() => {
 hae (url)
 .then((res) => res.json())
 .hen((data) => {
seterror(tiedot.virhe)
setdata(tiedot.vitsi)
 setloading(väärä)
 })
 }, [url]);


palata { tiedot, lataus, virhe };
};
viedäoletuksena useFetch;

Tässä koukussa olet ensin alustamassa kolmen arvon tilaa:

  • data: Sisältää API-vastauksen.
  • error: Sisältää virheilmoituksen, jos tapahtuu virhe.
  • loading: Sisältää loogisen arvon, joka osoittaa, onko se noutanut API-tiedot. Alusta lataustila tosi. Kun API palauttaa tiedot, aseta se arvoon false.

UseEffect()-koukku ottaa URL-merkkijonon argumenttina. Näin varmistetaan, että se toimii aina, kun URL-osoite muuttuu.

UseFetch()-funktio palauttaa objektin, joka sisältää tiedot, lataus- ja virhearvot.

React Custom Hookin käyttäminen

Jos haluat käyttää juuri luomaasi mukautettua useFetch()-koukkua, aloita tuomalla se:

konst useFetch = vaatia("./useFetch")

Käytä sitä sitten seuraavasti:

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

Havainnollistaaksesi seuraavaa vitsikomponenttia:

konst Vitsit = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? tyyppi = yksittäinen>";
konst { tiedot, lataus, virhe } = useFetch (url);
jos (Ladataan) palata (
<div>Ladataan...</div>
 )


palata (
<div>
 {virhe &&<div>{virhe}</div>}
 {data &&<div>{<div>{data}</div>}</div>}
</div>
 );
};
viedäoletuksena Vitsit;

Se kutsuu useFetch()-koukun URL-osoitteen kanssa vitsisovellusliittymään ja vastaanottaa tiedot, lataus- ja virhearvot.

Jos haluat hahmontaa Vitsikomponentin, tarkista ensin, onko Loading tosi. Jos näin on, näytä "Ladataan…" -lauseke, muuten tiedot ja mahdolliset virheilmoitukset tulevat näkyviin.

Miksi käyttää mukautettuja reagointikoukkuja?

Aivan kuten käytit mukautettua useFetch()-koukkua tässä komponentissa, voit käyttää sitä uudelleen muissa komponenteissa. Se on se kauneus, että logiikka ulkoistetaan koukkuihin sen sijaan, että kirjoitettaisiin se jokaiseen komponenttiin.

Koukut ovat Reactin tehokas ominaisuus, jonka avulla voit parantaa koodisi modulaarisuutta.