Загрузка и отображение данных из API с помощью React

В этой статье мы научимся запрашивать данные из стороннего API с помощью React. Это открытый API, поэтому аутентификация не требуется.

Мы будем использовать открытый API Game of Thrones для извлечения и отображения всех частей Game of Thrones вместе с подробной информацией о каждой книге.

  • Итоговый код.
  • Начальный код.
Содержание

Задача: получение списка из API

Из API мы получаем данные в формате JSON. Затем они преобразовываются в стандартные объекты JavaScript. Списки, импортированные через API, представляют собой массив объектов, содержащих отдельные данные.

Основные этапы реализации:

  • Получение данных из API при нажатии кнопки «Fetch Data».
  • Отображение информации из полученных данных.

Изначальный код

Для начала создайте копию этого кода на CodeSandbox. Он содержит:

  • URL-адрес API для выполнения GET-запроса.
  • Стили в файле
    styles.css
    .
  • Шаблон JSX для каждого полученного объекта.

Подсказка

Обратите внимание на использование Axios для выполнения GET-запросов к REST API. А также на использование метода .map() для визуализации данных массива. Посмотрите, как должна выглядеть итоговая страница.

Решение: загрузка и отображение данных из API

Мы будем использовать Axios – библиотеку для выполнения HTTP-запросов. Возвращаемые данные будут сохраняться в переменных состояния перед использованием компонентом.

Эта задача выполняется в четыре этапа:

  • Установка зависимостей.
  • Создание переменной состояния для хранения данных.
  • Запрос данных.
  • Отображение возвращенных данных.

Установка зависимостей

Установите Axios в CodeSandbox с помощью кнопки «Add Dependency», расположенной в левой боковой панели. Импортируйте Axios в компонент App() с помощью приведенной ниже команды:

import axios from 'axios';

Создание переменной состояния для хранения данных API

Получаемые из API данные нужно сохранять в переменной состояния, чтобы компонент мог их использовать. Импортируйте привязку useState в компонент с помощью следующей команды:

import React, { useState } from 'react';

В компоненте App() создайте переменную состояния с именем books, используя следующий код:

import // ...

function App(){
    const [books, setBooks] = . useState(null);

    return (
        // возвращённый JSX будет тут
    )
}

Переменная

books
установлена в
null
. Метод setBooks инициализирует значения
books
возвращенными данными.

Запрос данных из API

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

Создайте функцию

fetchData
в компоненте
App()
и используйте Axios для извлечения необходимых данных из API. Сделайте это с помощью следующего кода:

import // ...

function App(){
    const [books, setBooks] = . useState(null);

    const apiURL = "https://www.anapioficeandfire.com/api/books?pageSize=30";

    const fetchData = async () => {
        const response = await axios.get(apiURL)

        setBooks(response.data) 
    }

    return (
        // возвращённый JSX будет тут
    )
}

Мы создали функцию

fetchData
, которая отправляет запрос API. Когда запрос завершается, мы используем метод
setBooks
, чтобы сохранить данные в переменной
books
.

Отображение возвращенных данных

В методе

App()
объявите функцию
fetchData
как обработчик нажатия кнопки «Fetch Data». Используйте обработчик события
onClick
для вызова функции при каждом нажатии кнопки.

Сделайте это с помощью следующего кода:

import // ...

function App(){

    // Переменные компонента

    const fetchData = async () => {
        const response = await axios.get(apiURL)

        setBooks(response.data) 
    }

    return (
        <div className="App">
      <h1>Game of Thrones Books</h1>
      <h2>Fetch a list from an API and display it</h2>

      {/_ Запрос данных из API _/}
      <div>
        <button className="fetch-button" onClick={fetchData}>
          Fetch Data
        </button>
      </div>

      {/_ Отображение данных из API _/}
      <div className="books">
        // Данные из API будут тут
            </div>

    </div>
    )
}

Теперь при нажатии кнопки «Fetch Data» вызывается функция

fetchData
для извлечения данных и их сохранения в переменной состояния.

Используйте метод

.map()
для перебора объектов в полученном массиве. Сделайте это с помощью следующего кода:

import // ...

function App() {
  // здесь идут переменные компонента

  return (
    <div className="App">
      <h1>Game of Thrones Books</h1>
      <h2>Fetch a list from an API and display it</h2>

      {/_ Запрос данных из API _/}

          <div>
        // Кнопка для запроса данных
      </div>

      {/_ Отображение данных из API _/}
      <div className="books">
        {books &&
          books.map((book, index) => {
            const cleanedDate = new Date(book.released).toDateString();
            const authors = book.authors.join(', ');

            return (
              <div className="book" key={index}>
                <h3>Book {index + 1}</h3>
                <h2>{book.name}</h2>

                <div className="details">
                  <p>👨: {authors}</p>
                  <p>📖: {book.numberOfPages} pages</p>
                  <p>🏘️: {book.country}</p>
                  <p>⏰: {cleanedDate}</p>
                </div>
              </div>
            );
          })}
      </div>
    </div>
  );
}

Мы выводим данные, только если в

books
содержится какое-либо значение. Перед тем, как отобразить дату, нужно преобразовать её в правильный формат. Если данные об авторе пришли в массиве, то преобразуем его значения в строку, разделенную запятой и пробелом. Таким образом, после нажатия кнопки «Fetch Data» отображается список всех 12 книг Game of Thrones.

Посмотрите, как выглядит итоговая страница. Итоговый код на CodeSandbox.

Заключение

В этой статье мы узнали, как извлекать данные из API и отображать их с помощью React.

Данная публикация представляет собой перевод статьи «Fetch and Display from an API» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню