</> Praktum

Главная / React / Загрузка в React

Урок 7 · React

Просим данные в эффекте и не зацикливаем запрос

Эффект нужен для запроса. Обычный рендер только показывает уже полученные данные.

Почему это следующий шаг

Форма добавляет локальные задачи. Чужой список приходит снаружи, и это отдельный шаг маршрута.

Как сделать

Внутри useEffect вызови async-функцию, проверь ответ и запиши массив в state. В зависимостях укажи то, от чего запрос реально зависит. Пустой массив — один запрос после появления. Не ставь в зависимости state, который сам эффект тут же меняет без нужды: получится цикл. Покажи загрузку и ошибку отдельными кусками разметки. Очистка через AbortController нужна, если запрос повторяется на каждый ввод.

useEffect(() => {
  let ignore = false;
  loadLessons().then((items) => { if (!ignore) setLessons(items); });
  return () => { ignore = true; };
}, []);

Что проверить

  • Запрос уходит один раз, а не бесконечно.
  • Ошибка видна текстом.
  • Список не рисуется, пока это не массив.

Попробуй

Загрузи три урока из JSON и покажи надпись, пока они едут.

Практикум по теме