Получение данных API при нажатии кнопки в React.

JavaScript
React

Реагирующие хуки

Библиотека React предоставляет хуки, которые помогают управлять состоянием различных компонентов, не полагаясь на классы.

Хук useEffect используется для управления побочными эффектами, такими как получение данных в функциональных компонентах.

Побочные эффекты — это операции, которые изменяют состояние компонента вне функции.

Давайте рассмотрим пример использования хука useEffect для получения данных из API JSON Placeholder.

Определите функцию для получения данных и вызовите ее в хуке useEffect.

import React, {useEffect,useState} from 'react';

function App() {
    const [data, setData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(`https://jsonplaceholder.typicode.com/albums/1`)
            const newData = await response.json()
            setData(newData)
        };

        fetchData();
    }, [])

    if (data) {
        console.log(data)
        return <div className='App'>{data.title}</div>;
    } else {
        return null;
    }

}

export default App;

fetchData() извлекает данные из API и устанавливает новое состояние данных.

Вы можете использовать такую ​​библиотеку, как axios, для отправки HTTP-запросов к API.

Функция выше получает сведения об элементе с идентификатором 1 в API альбома.

useEffect запускается после каждого рендеринга; он запускается после первого рендеринга и каждый раз при обновлении.
Мы можем использовать массив зависимостей, чтобы гарантировать, что эффект запускается только при изменении состояния идентификатора.

useEffect(() => {
      const fetchData = async () => {
           const response = await fetch(`https://jsonplaceholder.typicode.com/albums/${id}`)
            const newData = await response.json()
            setData(newData)
        };

        fetchData();
    }, [id])   
}

Хук useState хранит состояние данных, полученных из API.

Эта функция полезна, когда нам нужно получить данные, не полагаясь на определенное событие, такое как щелчок мыши или кнопки.

Поскольку useEffect запускается при первом подключении компонента к DOM, нам нужен способ получать данные только при возникновении события, особенно когда мы зависим от пользовательского ввода.

Получить данные по нажатию кнопки

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

Пользователь отправляет идентификатор элемента, который он хотел бы получить. Это делает поле id динамическим.

• Получение пользовательского ввода

<input className='album_id' required="required" placeholder='Enter an ID'/>
<button type="submit">Search</button>

• Обработка ввода пользователя

const [id, setId] = useState('')
const [data, setData] = useState(null)

const handleClick = async () => {
        try {
            const data = await (await fetch(`https://jsonplaceholder.typicode.com/albums/${id}`)).json()
            setData(data)
        } catch (err) {
            console.log(err.message)
        }
    }
 return (
        <div>
            <input className='album_id' required="required" placeholder='Enter an ID' value={id} onChange={e => setId(e.target.value)} />

            <button type="submit" onClick={handleClick} >Search</button>

        </div>
    )

Мы определяем переменную id и сохраняем ее состояние с помощью функции setId и передаем идентификатор в URL-адрес.

Мы также можем настроить отображаемый вывод в зависимости от того, получим ли мы ожидаемый ответ от API.

function checkResponse(data) {
        if (data) {
            console.log(data)
            return <div className='App'>{data.title}</div>;
        } else {
            return null;
        }
    }

checkResponse() используется для отображения различного вывода в зависимости от состояния ответа.

Вот — полный код, использованный в этом посте.
Приятного обучения!!!