Как запрашивать данные в ReactJS с fetch

1. Определите значение по умолчанию

Вызов fetch() является асинхронным методом, поэтому нам нужно использовать значение по умолчанию до тех пор, пока REST API не вернет ответ. Определение неправильных значений по умолчанию вызовет ошибки JavaScript еще до вызова fetch(), поэтому убедитесь, что значение по умолчанию указано в React JS коде. В нашем случае, так как мы ожидаем массив из вызова API, значением по умолчанию будет пустой массив.

const defaultValue = []

2. Объявите состояние React для хранения данных из API

Нам нужно объявить состояние React для хранения списка пользователей, возвращенного из ответа на вызов API. Обновление состояния с помощью setUsers() гарантирует, что экран обновится после получения списка пользователей из вызова REST API.

// Состояние для хранения списка пользователей
const [users, setUsers] = useState(defaultValue);

3. JavaScript функции для получения данных из API и сохранения ответа

Нам нужно объявить JS-функцию для получения данных с внешнего URL-адреса следующим образом:

1. Мы получаем данные из URL-адреса https://jsonplaceholder.typicode.com/todos/ с помощью JavaScript fetch() API.
2. Добавьте функцию обратного вызова в then() для преобразования ответа в формат JSON.
3. Состояние пользователя React обновляется списком пользователей из ответа API.

// Функция для сохранения данных
const getApiData = async () => {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/todos/"
  ).then((response) => response.json());

  // Обновим состояние
  setUsers(response);
};

4. Добавьте useEffect для получения API при загрузке страницы

После того, как мы определили функцию для получения данных API, она должна срабатывать при загрузке страницы. getApiData(), добавленный в React useEffect() с пустым массивом зависимостей, который гарантирует, что код срабатывает один раз при загрузке страницы.

useEffect(() => {
  getApiData();
}, []);

5. Генерация JSX-кода с состоянием React

Наконец, нам нужно отобразить сведения о каждом пользователе. Следовательно, мы сгенерируем JSX-код для каждого пользователя с помощью Array.map(), а функция обратного вызова вернет <div></div> с user.id и user.title.

<div className="app">
  {users.map((user) => (
      <div className="item-container">
        Id:{user.id} <div className="title">Title:{user.title}</div>
      </div>
   ))}
</div>

6. Вызов API через Axios

Основной недостаток вызова fetch() заключается в том, что нам пришлось вручную конвертировать данные из API в формат JSON. Существует npm пакет axios, который сам управляет преобразованием JSON. После установки npm install axios в package.json, можно реализовать метод getAPIData() через axios следующим образом:

import axios from "axios";

const getApiData = async () => {
  const response = await axios(
    "https://jsonplaceholder.typicode.com/todos/"
  );

  setUsers(response);
};

Полный код решения

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

import "./styles.css";

function App() {
  const [users, setUsers] = useState([]);

  const getApiData = async () => {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/todos/"
    ).then((response) => response.json());

    setUsers(response);
  };

  useEffect(() => {
    getApiData();
  }, []);

  return (
    <div className="app">
      {users.map((user) => (
          <div className="item-container">
            Id:{user.id} <div className="title">Title:{user.title}</div>
          </div>
        ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Чтобы изучить React с нуля и понять все тонкости работы с React пройдите наш авторский курс от создателей канала DevMagazine - Быстрый старт в React.

В первой части мы говорили о настройке маршрутизатора и упоминали BrowserRouter и NativeRouter, но это не единственные типы роутеров. Всего существует 6 роутеров, и в этой части мы подробно рассмотрим каждый из них. Серия статей о React Router v6 состоит из 4 частей.

1. Основы React Router
2. Продвинутые определения маршрутов
3. Управление навигацией
4. Подробно о роутерах (рассматривается в этой статье)

BrowserRouter

Из первой части мы уже знакомы с BrowserRouter. Это роутер по умолчанию, который вы должны использовать, если вы работаете над веб-приложением, и это роутер, который вы будете использовать в 99% всех своих приложений, поскольку он охватывает все обычные варианты использования маршрутизации. Другие роутеры, о которых поговорим далее, имеют очень специфические варианты использования.

NativeRouter

NativeRouter по сути является эквивалентом BrowserRouter, но для React Native. Если вы используете React Native, то это роутер, который вы захотите использовать.

HashRouter

Этот роутер работает очень похоже на BrowserRouter, но основное отличие заключается в том, что вместо того, чтобы изменять URL-адрес на что-то вроде http://localhost:3000/books он будет хранить URL-адрес в хэше, как http://localhost:3000/#/books. Как видите, этот URL-адрес имеет # после URL-адреса, который представляет собой хэш-часть URL-адреса. Все, что находится в хэш-части URL-адреса, является просто дополнительной информацией, которая обычно обозначает идентификатор на странице для целей прокрутки, поскольку страница будет автоматически прокручиваться до элемента с идентификатором, представленным хешем, при загрузке страницы. В React Router этот хэш на самом деле не используется для хранения идентификационной информации для прокрутки, а вместо этого он хранит информацию, связанную с текущим URL-адресом. Причина, по которой React Router делает это, заключается в том, что некоторые хостинг-провайдеры не позволяют вам фактически изменять URL-адрес вашей страницы. В этих очень редких случаях вы захотите использовать HashRouter, поскольку HashRouter не изменит фактический URL-адрес вашей страницы, а изменит только хэш вашей страницы. Если вы можете использовать какой-либо URL-адрес у своего хостинг-провайдера, то это не то, что вам следует использовать.

HistoryRouter

HistoryRouter (в настоящее время называется unstable_HistoryRouter) — это роутер, который позволяет вручную управлять объектом истории, который React Router использует для хранения всей информации, связанной с историей маршрутизации вашего приложения. Этот объект истории помогает убедиться, что такие вещи, как кнопки «Назад» и «Вперед» в браузере, работают правильно. Это роутер, который вы, вероятно, никогда не должны использовать, если у вас нет очень конкретной причины, по которой вы хотите перезаписать или контролировать поведение истории по умолчанию React Router.

MemoryRouter

MemoryRouter немного отличается от остальных роутеров, о которых мы говорили, поскольку вместо того, чтобы хранить информацию о текущем маршруте в URL-адресе браузера, этот роутер хранит информацию о роуте непосредственно в памяти. Очевидно, что это очень неподходящий роутер для обычных операций маршрутизации, но этот роутер невероятно полезен, когда вы пишете тесты для своего приложения, у которого нет доступа к браузеру. Из-за того, как работает React Router, вам необходимо, чтобы ваши компоненты были упакованы в маршрутизатор, иначе весь ваш код маршрутизации будет выдавать ошибки и ломаться. Это означает, что даже если вы хотите протестировать один компонент, вам нужно будет обернуть этот компонент внутрь маршрутизатора, иначе он будет выдавать ошибки. Если вы тестируете свой код таким образом, что у него нет доступа к браузеру (например, модульное тестирование), то маршрутизаторы, о которых мы говорили до сих пор, будут выдавать ошибки, поскольку все они зависят от URL-адреса в браузере. MemoryRouter, с другой стороны, хранит всю свою информацию в памяти, что означает, что он никогда не обращается к браузеру и идеально подходит при модульном тестировании компонентов. Однако, за исключением этого конкретного случая использования, этот маршрутизатор никогда не будет использоваться.

StaticRouter

Роутер StaticRouter также имеет очень специфический вариант использования. Этот маршрутизатор специально предназначен для серверного рендеринга ваших приложений React, поскольку он принимает один проп location и визуализирует ваше приложение, используя этот location в качестве URL-адреса. Этот роутер на самом деле не может выполнять какую-либо маршрутизацию и будет просто отображать одну статическую страницу, но это идеально подходит для рендеринга на сервере, поскольку вы хотите просто отобразить HTML вашего приложения на сервере, а затем клиент может настроить всю вашу маршрутизацию и так далее.

<StaticRouter location="/books">
  <App />
</StaticRouter>

Итоги

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