Unit 9. Хуки

Видео доступно после приобретения курса

Домашнее задание

Загрузка ДЗ на проверку возможна только после приобретения курса.

Скачайте шаблон дз. Изучите структуру приложения. Обратите внимание на файлы App.js, Comment.js, Placeholder.js. Поскольку мы изучаем хуки, я решил облегчить вам задачи, сделав решение на классах. Однако, чтобы не терять навык, рекомендую также попробовать делать такие решения самостоятельно, подглядывая в мои.

Первое задание аналогично тому, что показано в видео - необходимо создать компонент PlaceholderPostHook, который будет получать посты по API с адреса:

https://jsonplaceholder.typicode.com/users/1/posts

после получения постов - вывод их на страницу. Верстка вывода:


<section>
  <h2> Номер поста. Заголовок</h2>
  <p>Тело поста</p>
</section>

обратите внимание, если есть какие-либо вопросы - вы можете посмотреть ход решения на классах в PlaceholderPost.js. Компонент должен быть написан в функциональном стиле. Для решения вы используете хук состояния и хук эффекта. Импортируйте компонент в App.js, подключите и изучите работу.

Логика компонента следующая - после создания, перед return необходимо сделать запрос по API, и после ответа - используя useEffect добавить полученные данные в стейт, что вызовет рендер компонента и вывод данных. Понятно, что если мы не будем использовать useEffect, то запрос на API будет асинхронным, и вывод компонента случится раньше, чем данные будут получены - мы ничего не увидим.

Давайте усложним задачу. Получение данных один раз это хорошо, но очень просто. Реализуем интерфейс, где пользователь может менять выбор и получать данные в зависимости от этого выбора. Примеры - пользователь выбрал город в выпадающем списке, или выбрал фильтр товара - в зависимости от этого backend возвратит или список отделений, либо товары попавшие под фильтр. Итак, реализуем этот use case. Создадим новый компонент (функциональный) CommentHook. Как и в предыдущем варианте, вы можете подсмотреть решение на классах в файле Comment.js. Разместите в return компонента выпадающий список select, содержащий следующие варианты:


<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>

это id постов, к которым пользователь хочет увидеть комментарии. По изменению ( onChange) select вызывается функция selectHandler, которая с помощью event получает value выбранного option. После этого функция совершает запрос по API:

https://jsonplaceholder.typicode.com/posts/ID/comments

Где вместо ID поставьте полученное из select число.

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

Верстка вывода - аналогично верстке результата в Comment.js. Обратите внимание, произошло событие - мы изменили select. После этого делается запрос по API. Результат помещается в state. State генерирует изменение внешнего вида. Как видите здесь, можно обойтись без useEffect.

В задании 2 мы выполнили очень распространненый use case, который несомненно на практике вы будете применять постоянно, однако он обладает одним существенным недостатком, мы все делали внутри одного компонента. Конечно, при получении сложных данных - например получении товаров - удобно создать еще один компонент. И тут возможны два варианта. Давайте их рассмотрим.

Первый вариант

  • Компонент 1 получает данные от backend и передает все данные в компонент 2
  • Компонент 2 с помощью цикла (любого) выводит данные на страницу

Второй вариант

  • Компонент 1 получает данные от backend и запускает цикл (любой) где по блокам
  • передает данные в компонент2.
  • Компонент 2 выводит один блок данных

Третий вариант

  • Компонент 1 получает данные от backend. Передает компоненту 2
  • Компонент 2 запускает цикл и в цикле по блокам передает данные компоненту 3
  • Компонент 3 выводит данные.

Как видите много способов реализовать. Мы выберем второй способ. Т.е. получим данные в компоненте Comment2Hook и передадим в CommentListHook.

Задача доступна после приобретения курса.
Задача доступна после приобретения курса.
Задача доступна после приобретения курса.

Следи за новостями курсов на нашем канале

Открыть

Правила оформления домашних заданий

Открыть

Форум по задачам

Forum