Урок 7 · React
Просим данные в эффекте и не зацикливаем запрос
Эффект нужен для запроса. Обычный рендер только показывает уже полученные данные.
Почему это следующий шаг
Форма добавляет локальные задачи. Чужой список приходит снаружи, и это отдельный шаг маршрута.
Как сделать
Внутри useEffect вызови async-функцию, проверь ответ и запиши массив в state. В зависимостях укажи то, от чего запрос реально зависит. Пустой массив — один запрос после появления. Не ставь в зависимости state, который сам эффект тут же меняет без нужды: получится цикл. Покажи загрузку и ошибку отдельными кусками разметки. Очистка через AbortController нужна, если запрос повторяется на каждый ввод.
useEffect(() => {
let ignore = false;
loadLessons().then((items) => { if (!ignore) setLessons(items); });
return () => { ignore = true; };
}, []);Что проверить
- Запрос уходит один раз, а не бесконечно.
- Ошибка видна текстом.
- Список не рисуется, пока это не массив.
Попробуй
Загрузи три урока из JSON и покажи надпись, пока они едут.
Практикум по теме
- Ошибка запроса в состоянии компонента — Загрузка, успех и ошибка — три состояния, и одно из них не должно затирать остальные.