Reaguj niestandardowe haki

Hooki to funkcje wielokrotnego użytku.

Kiedy masz logikę komponentu, która musi być używana przez wiele komponentów, możemy wyodrębnić tę logikę do niestandardowego hooka.

Niestandardowe hooki zaczynają się od "use". Przykład: useFetch.

Zbuduj hak

W poniższym kodzie pobieramy dane w naszym Homekomponencie i wyświetlamy je.

Do pobierania fałszywych danych użyjemy usługi JSONPlaceholder . Ta usługa doskonale nadaje się do testowania aplikacji, gdy nie ma istniejących danych.

Aby dowiedzieć się więcej, zapoznaj się z sekcją JavaScript Fetch API .

Skorzystaj z usługi JSONPlaceholder, aby pobrać fałszywe elementy „do zrobienia” i wyświetlić tytuły na stronie:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const Home = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

Logika pobierania może być potrzebna również w innych komponentach, więc wyodrębnimy ją do niestandardowego hooka.

Przenieś logikę pobierania do nowego pliku, który ma być używany jako niestandardowy hook:

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

import ReactDOM from "react-dom";
import useFetch from "./useFetch";

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

Przykład wyjaśniony

Stworzyliśmy nowy plik o nazwie useFetch.jszawierający wywołaną funkcję, useFetchktóra zawiera całą logikę potrzebną do pobrania naszych danych.

Usunęliśmy zakodowany na stałe adres URL i zastąpiliśmy go urlzmienną, którą można przekazać do niestandardowego hooka.

Na koniec zwracamy nasze dane z naszego Hooka.

W index.jsprogramie importujemy nasz useFetchhook i wykorzystujemy go jak każdy inny hook. To tutaj przekazujemy adres URL, z którego pobieramy dane.

Teraz możemy ponownie użyć tego niestandardowego hooka w dowolnym komponencie, aby pobrać dane z dowolnego adresu URL.