> Как обработать ответ API в React (React)

Для обработки ответа API в React обычно используют комбинацию хуков useState и useEffect. Вот типичный подход:

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

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // Пустой массив зависимостей - запрос выполняется один раз при монтировании

  if (loading) return <div>Загрузка...</div>;
  if (error) return <div>Ошибка: {error}</div>;
  return <div>Данные: {JSON.stringify(data)}</div>;
}

Ключевые моменты:

• Используйте useEffect для выполнения запроса при монтировании компонента.

• Обрабатывайте три состояния: загрузка (loading), успех (data) и ошибка (error).

• Для более сложных сценариев (кэширование, повторные запросы) рассмотрите библиотеки вроде React Query или SWR.

• Не забывайте очищать эффекты (например, отменять запросы при размонтировании компонента) через возвращаемую функцию в useEffect.