Większość aplikacji, które dziś tworzymy, wykorzystuje dane z zewnętrznych źródeł za pośrednictwem API. Pobierają dane z serwera i wyświetlają je w swoim interfejsie użytkownika.

Korzystając z Reacta, możesz stworzyć niestandardowy hook do pobierania danych z API. Podany adres URL zwróci obiekt zawierający dane i opcjonalny komunikat o błędzie. Możesz następnie użyć tego haka w komponencie.

Tworzenie własnego hooka reakcji

Zacznij od utworzenia nowego pliku o nazwie useFetch.js. W tym pliku utwórz funkcję o nazwie useFetch(), która akceptuje ciąg URL jako parametr.

stały useFetch = (url) => {
}

Hak powinien wykonać wywołanie API zaraz po wywołaniu. Możesz użyć hak useEffect() dla tego.

W przypadku rzeczywistych wywołań interfejsu API użyj interfejsu API pobierania. Ten interfejs API jest interfejsem opartym na obietnicach, który umożliwia asynchroniczne wysyłanie żądań i otrzymywanie odpowiedzi przez HTTP.

W niestandardowym haczyku useFetch() dodaj następujące elementy.

import { useEffect, useState } 





instagram viewer


z "reagować";
stały useFetch = (url) => {
stały [dane, setdata] = useState(zero);
stały [ładowanie, ustawianie ładowania] = useState(PRAWDA);
 const [błąd, seterror] = useState("");


useEffect(() => {
 pobierz (adres URL)
 .to((res) => res.json())
 .to((dane) => {
seterror(dane.błąd)
setdata(dane.żart)
 ładowanie zestawu(fałszywy)
 })
 }, [adres URL]);


zwrócić { dane, ładowanie, błąd };
};
eksportdomyślna użyjPobierz;

W tym haczyku najpierw inicjujesz stan trzech wartości:

  • data: przechowuje odpowiedź API.
  • error: Przechowuje komunikat o błędzie, jeśli wystąpi błąd.
  • ładowanie: przechowuje wartość logiczną, która wskazuje, czy pobrał dane API. Zainicjuj stan ładowania na true. Gdy API zwróci dane, ustaw je na false.

Hak useEffect() przyjmuje ciąg URL jako argument. Ma to na celu zapewnienie, że będzie on uruchamiany za każdym razem, gdy zmieni się adres URL.

Funkcja useFetch() zwróci obiekt zawierający dane, ładowanie i wartości błędów.

Korzystanie z niestandardowego hooka React

Aby użyć utworzonego właśnie niestandardowego haka useFetch(), zacznij od zaimportowania go:

stały użyjPobierz = wymagać("./useFetch")

Następnie użyj go w następujący sposób:

stały {dane, ładowanie, błąd} = useFetch (url)

Aby to zademonstrować, rozważ następujący komponent Żarty:

stały Żarty = () => {
 stały adres URL = "<https://sv443.net/jokeapi/v2/joke/Programming? typ=pojedynczy>";
stały { dane, ładowanie, błąd } = useFetch (url);
jeśli (Ładowanie) zwrócić (
<div>Ładowanie...</div>
 )


zwrócić (
<div>
 {błąd &&<div>{błąd}</div>}
 {dane &&<div>{<div>{dane}</div>}</div>}
</div>
 );
};
eksportdomyślna Żarty;

Wywołuje zaczep useFetch() z adresem URL do interfejsu API jokes i odbiera dane, ładowanie i wartości błędów.

Aby wyrenderować komponent Żarty, najpierw sprawdź, czy ładowanie ma wartość true. Jeśli tak, wyświetl komunikat „Ładowanie…”, w przeciwnym razie wyświetl dane i komunikat o błędzie, jeśli taki istnieje.

Dlaczego warto korzystać z niestandardowych haków reakcji?

Tak jak użyłeś niestandardowego haka useFetch() w tym komponencie, możesz go ponownie użyć w innych komponentach. Na tym polega piękno uzewnętrzniania logiki w hookach zamiast zapisywania jej w każdym komponencie.

Hooki to potężna funkcja Reacta, której możesz użyć do poprawy modułowości swojego kodu.