A manapság létrehozott alkalmazások többsége külső forrásokból származó adatokat használ fel API-kon keresztül. Adatokat kérnek le egy szerverről, és megjelenítik a felhasználói felületükön.

A React használatával egyéni hookot hozhat létre adatok lekéréséhez egy API-ból. Adott URL-címmel ez a hook egy objektumot ad vissza, amely tartalmazza az adatokat és egy opcionális hibaüzenetet. Ezt a horgot ezután egy alkatrészben használhatja.

Egyéni React Hook létrehozása

Kezdje egy új, useFetch.js nevű fájl létrehozásával. Ebben a fájlban hozzon létre egy useFetch() nevű függvényt, amely elfogad egy URL-karakterláncot paraméterként.

const useFetch = (url) => {
}

A horog kell kezdeményezze az API-hívást közvetlenül a hívás után. Használhatja a useEffect() hook ezért.

A tényleges API-hívásokhoz használja a fetch API-t. Ez az API egy ígéret alapú interfész, amely lehetővé teszi, hogy HTTP-n keresztül aszinkron módon kérjen és fogadjon válaszokat.

A useFetch() egyéni hook-ban adja hozzá a következőket.

import { useEffect, useState } tól től "reagál";
const useFetch = (url) => {
const [data, setdata] = useState(nulla);
const [loading, setloading] = useState(igaz);
 const [hiba, seterror] = useState("");


useEffect(() => {
 lekérni (url)
 .then((res) => res.json())
 .then((data) => {
szeterror(adat.hiba)
setdata(adat.tréfa)
 setloading(hamis)
 })
 }, [url]);


Visszatérés { adat, betöltés, hiba };
};
exportalapértelmezett useFetch;

Ebben a hookban először három érték állapotát inicializálja:

  • adatok: Az API-választ tartalmazza.
  • error: Hibaüzenetet tárol, ha hiba történik.
  • loading: Logikai értéket tartalmaz, amely jelzi, hogy lekérte-e az API-adatokat. Inicializálja a betöltési állapotot true-ra. Miután az API visszaküldi az adatokat, állítsa be hamis értékre.

A useEffect() hook az URL karakterláncot veszi argumentumként. Ez annak biztosítására szolgál, hogy az URL minden alkalommal lefusson.

A useFetch() függvény egy objektumot ad vissza, amely tartalmazza az adatokat, a betöltési és a hibaértékeket.

React Custom Hook használata

Az imént létrehozott useFetch() egyéni hook használatához először importálja azt:

const useFetch = igényelnek("./useFetch")

Ezután használja az alábbiak szerint:

const {adat, betöltés, hiba} = useFetch (url)

Ennek bemutatásához vegye figyelembe a következő viccek összetevőt:

const Viccek = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? típus=egyetlen>";
const { adat, betöltés, hiba } = useFetch (url);
ha (Betöltés) Visszatérés (
<div>Betöltés...</div>
 )


Visszatérés (
<div>
 {hiba &&<div>{hiba}</div>}
 {adat &&<div>{<div>{adat}</div>}</div>}
</div>
 );
};
exportalapértelmezett Viccek;

Meghívja a useFetch() hook-ot a viccek API URL-jével, és megkapja az adatokat, a betöltési és a hibaértékeket.

A Viccek komponens megjelenítéséhez először ellenőrizze, hogy a Betöltés igaz-e. Ha igen, akkor jelenítse meg a „Betöltés…” utasítást, ellenkező esetben jelenítse meg az adatokat és a hibaüzenetet, ha van ilyen.

Miért érdemes egyéni reakcióhorgokat használni?

Ahogy ebben az összetevőben használta a useFetch() egyéni hook-ot, újra felhasználhatja más összetevőkben is. Ez annak a szépsége, hogy a logikát külső elemekbe helyezzük ahelyett, hogy az egyes összetevőkbe írnánk.

A horgok a React egyik hatékony funkciója, amellyel javíthatja kódja modularitását.