Как получить данные из API в функциональном компоненте React JS Как получить данные из API в React с помощью хуков Реагировать на выборку данных из API при нажатии кнопки?

Введение: React.js — популярная библиотека JavaScript для создания пользовательских интерфейсов. Одной из наиболее распространенных задач в веб-разработке является получение данных из API. В этой статье мы рассмотрим процесс получения данных из API и их отображения в приложении React.js.

Настройка проекта React.js:

  1. Создайте новый проект React.js с помощью инструмента «Создать приложение React».
npx create-react-app my-app
cd my-app
npm start

Шаг 2. Установите Axios, популярную клиентскую библиотеку HTTP, для получения данных из API.

npm install axios

Получение данных из API:

  1. Создайте новый компонент для получения данных из API.
import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const result = await axios.get(
        "https://jsonplaceholder.typicode.com/posts"
      );
      setData(result.data);
      setLoading(false);
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <div>Loading...</div> : <div>{data.length}</div>}
    </div>
  );
}

export default App;

Шаг 2. В хуке useEffect мы используем Axios для получения данных из API. Ключевые слова async и await используются для обработки асинхронного характера вызова API. Функция setLoading используется для отображения сообщения о загрузке во время выборки данных.

Отображение данных из API:

  1. Отобразите данные в компоненте React.js.
import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const result = await axios.get(
        "https://jsonplaceholder.typicode.com/posts"
      );
      setData(result.data);
      setLoading(false);
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? (
        <div>Loading...</div>
      ) : (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default App;
  1. В операторе return мы используем функцию map для циклического просмотра данных и отображения каждого элемента.

Вывод:

Извлечение данных из API — обычная задача в веб-разработке, и React.js предоставляет простой и эффективный способ выполнить эту задачу. Используя хук useEffect и Axios, мы можем легко получать данные из API и отображать их в нашем приложении React.js. Это позволяет нам создавать динамические и интерактивные пользовательские интерфейсы, которые можно обновлять в режиме реального времени. Выполнив шаги, описанные в этой статье, вы получите четкое представление о том, как получать данные из API в React.js. Удачного кодирования!