Большинство приложений, которые мы создаем сегодня, потребляют данные из внешних источников через API. Они получают данные с сервера и отображают их в своем пользовательском интерфейсе.

Используя React, вы можете создать собственный хук для получения данных из API. Учитывая URL-адрес, этот хук вернет объект, содержащий данные и необязательное сообщение об ошибке. Затем вы можете использовать этот хук в компоненте.

Создание пользовательского хука React

Начните с создания нового файла с именем useFetch.js. В этом файле создайте функцию с именем useFetch(), которая принимает строку URL в качестве параметра.

константа useFetch = (URL) => {
}

Крючок должен сделать вызов API сразу после вызова. Вы можете использовать хук useEffect() для этого.

Для реальных вызовов API используйте fetch API. Этот API представляет собой интерфейс на основе обещаний, который позволяет асинхронно отправлять запросы и получать ответы по HTTP.

В пользовательском хуке useFetch() добавьте следующее.

импорт { useEffect, useState } 





instagram viewer


из "реагировать";
константа useFetch = (URL) => {
константа [данные, набор данных] = useState (нулевой);
константа [загрузка, установка загрузки] = useState(истинный);
 const [ошибка, seterror] = useState("");


использовать эффект (() => {
 получить (адрес)
 .тог((рез) => res.json())
 .тог((данные) => {
установить ошибку(данные.ошибка)
установить данные(данные.шутить)
 установить загрузку(ЛОЖЬ)
 })
 }, [адрес]);


возвращаться {данные, загрузка, ошибка};
};
экспортдефолт использоватьFetch;

В этом хуке вы сначала инициализируете состояние трех значений:

  • data: содержит ответ API.
  • error: содержит сообщение об ошибке в случае возникновения ошибки.
  • loading: содержит логическое значение, указывающее, были ли получены данные API. Инициализируйте состояние загрузки в true. Как только API вернет данные, установите для него значение false.

Хук useEffect() принимает строку URL в качестве аргумента. Это делается для того, чтобы он запускался каждый раз при изменении URL-адреса.

Функция useFetch() вернет объект, содержащий значения данных, загрузки и ошибки.

Использование пользовательского хука React

Чтобы использовать только что созданный пользовательский хук useFetch(), начните с его импорта:

константа использоватьFetch = требовать(""./useFetch")

Затем используйте его следующим образом:

константа {данные, загрузка, ошибка} = useFetch (url)

Для демонстрации рассмотрим следующий компонент Jokes:

константа Шутки = () => {
 постоянный URL = "<https://sv443.net/jokeapi/v2/joke/Programming? тип = сингл>";
константа {данные, загрузка, ошибка} = useFetch (url);
если (загрузка) возвращаться (
<див>Загрузка...</div>
 )


возвращаться (
<див>
 {ошибка &&<див>{ошибка}</div>}
 {данные &&<див>{<див>{данные}</div>}</div>}
</div>
 );
};
экспортдефолт Шутки;

Он вызывает хук useFetch() с URL-адресом API шуток и получает значения данных, загрузки и ошибки.

Чтобы визуализировать компонент Jokes, сначала проверьте, верно ли значение Loading. Если это так, отобразите оператор «Загрузка…», в ​​противном случае отобразите данные и сообщение об ошибке, если таковые имеются.

Зачем использовать пользовательские хуки React?

Точно так же, как вы использовали пользовательский хук useFetch() в этом компоненте, вы можете повторно использовать его в других компонентах. В этом прелесть воплощения логики в хуки вместо того, чтобы прописывать ее в каждом компоненте.

Хуки — это мощная функция React, которую вы можете использовать для улучшения модульности своего кода.