Глава 16. Загрузка данных и состояния интерфейса

Зачем эта глава

Почти любой заказ — это работа с данными. Нужно уметь получать их с сервера и показывать в интерфейсе.

Теория (коротко)

Обычно мы используем fetch внутри useEffect.

Нужно держать три состояния: загрузка, ошибка, данные.

JSX

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [items, setItems] = useState([]);

useEffect(() => {
  async function load() {
    try {
      const res = await fetch("https://api.example.com/items");
      const data = await res.json();
      setItems(data);
    } catch (err) {
      setError("Ошибка загрузки");
    } finally {
      setLoading(false);
    }
  }
  load();
}, []);

Подсказка: всегда показывай пользователю состояние загрузки или ошибку.

Задания

Задание: список данных

Сделай запрос к API.
Покажи индикатор загрузки.
Обработай ошибку.

Практика для фриланса

На заказах уточняй, какой API используется, какие поля приходят и как часто данные обновляются.

Проверка себя

Ты понимаешь, как загрузить данные и правильно отобразить состояния.

Мини-проект

Цель: список постов.

Требования: заголовок и первые 10 постов.

Критерий готовности: список появляется, а при ошибке показывается сообщение.

Словарь главы

Loading state: Состояние, когда данные ещё загружаются.
Ошибка: Сообщение о проблеме с запросом.

← Предыдущая Следующая глава →