Часть 3 - В третьей части мы займемся BlogDetail, компонентами Create и создадим настраиваемый хук useFetch.
Всем привет! Итак, это будет третья часть серии приложений для блога React. В первой части мы обсудили, как начать новый проект React, и узнали, как настроить репозиторий Git для отслеживания наших изменений. Также мы посмотрели файл package.json.
Затем, во второй части, мы начали создавать наши компоненты. Во-первых, мы получили обзор всех наших компонентов и того, как они должны работать. Затем мы создали компоненты Home и BlogList.
В третьей части я буду иметь дело с другими важными компонентами, такими как компонент «Подробности блога», компонент «Создать новый блог» и настраиваемый обработчик useFetch в этой части.
Затем я бы включил все остальные компоненты и локальную серверную часть в четвертую часть серии.
Если вы хотите узнать больше о пользовательских хуках React, эта замечательная статья Mayank Gupta станет отличным ресурсом.
Компонент BlogDetails
Это компонент, из которого мы получаем и отображаем отдельную запись в блоге. Итак, как вы помните, мы вызываем этот компонент, используя ссылку, передающую веб-адрес. Итак, мы включили идентификатор блога в URL-адрес в качестве параметра.
Итак, мы извлечем идентификатор с помощью хука getParams(). Затем мы используем наш настраиваемый обработчик useFetch, чтобы получить этот конкретный блог, передав идентификатор в обработчике useFetch.
Мы также используем хук под названием useHistory(), который создает стек истории и выталкивает или выталкивает элементы из этого стека. Наконец, мы сохраняем компоненты или страницы, которые мы посещаем, в стеке истории.
Затем мы отображаем сообщение в блоге, как мы это делали в компоненте BlogList. Мы также использовали данные isPending и error с помощью условных операторов, чтобы улучшить взаимодействие с пользователем.
Также у нас есть кнопка для удаления блога. Мы можем удалить блог, щелкнув по нему. Эта кнопка имеет функцию handleClick для обработки любого щелчка по этому блогу.
В функции handleClick мы получаем блог и передаем метод DELETE для его удаления. Затем мы помещаем URL-адрес домашней страницы в стек истории, перенаправляя нашего пользователя на домашнюю страницу после удаления блога.
Создать компонент
Это компонент, который мы используем для создания новых блогов в нашем приложении React. Он использует два крючка: useState и useHistory.
Затем мы создаем функциональный компонент Create. Мы используем хук useState для создания и установки различных полей. Например, мы хотим создать форму для добавления сообщений блога в наше приложение. Итак, у нас есть несколько полей, которые мы хотим, чтобы писатель заполнил перед публикацией блога.
У нас объявлены переменные title, body, author и isPending. У нас также есть переменная history, которую мы получаем из useHistory.
По умолчанию мы оставляем заголовок и поле тела пустыми. У нас есть поле автора, настроенное на имя по умолчанию, так как в настоящее время автор зарегистрирован как поле выбора. Вы вольны выбирать свой собственный путь. В идеале он должен быть пустым, и его должен заполнить сам автор.
Для isPending по умолчанию установлено значение false. Он показывает, ждем ли мы добавления блога или нет.
Мы создаем базовую форму с кнопкой отправки и используем функции setTitle, setAuthor, setBody для динамической установки наших переменных по мере заполнения формы.
У нас есть функция с именем handleSubmit для обработки процесса, который мы выполняем, когда нажимаем кнопку «Добавить блог».
Мы отображаем кнопку Добавить блог, только если для параметра isPending установлено значение false. В противном случае мы знаем, что у нас уже есть отложенное добавление блога, поэтому мы отображаем сообщение, показывающее Добавление блога.
В функции handleSubmit мы запрещаем поведение по умолчанию не обновлять страницу. Затем мы собираем все данные и превращаем их в объект. Затем мы устанавливаем для isPending значение true. Затем мы вызываем функцию выборки и используем метод POST. Наконец, мы передаем объект блога в функцию выборки.
После этого мы устанавливаем для isPending значение false и помещаем домашнюю страницу в стек истории. Это приведет нас на главную страницу после добавления блога.
крючок useFetch
В этом компоненте мы создаем настраиваемую ловушку useFetch, которая помогает нам получать данные с нашего локального сервера JSON.
Мы будем использовать хуки useState и useEffect, доступные в React. Чтобы узнать больше о крючках, это отличный источник: -
Мы будем использовать ловушку useState для установки трех переменных: data, isPending и error. У нас также есть сеттер на троих. Мы устанавливаем data в пустой массив по умолчанию. Мы сохраняем isPending true и устанавливаем error на null по умолчанию.
Поскольку мы используем локальный сервер JSON, у нас будет мгновенный доступ к нашим данным. Таким образом, мы не сможем увидеть эффект загрузки на главной странице. Итак, чтобы увидеть и испытать то, что пользователи с медленным подключением могут видеть на домашней странице, мы используем функцию setTimeout, которая задерживает процесс выборки на время, которое мы вводим. Мы никогда не должны использовать это в производственной среде, поскольку мы хотим быть как можно быстрее.
Итак, внутри ловушки useEffect у нас есть контроллер прерывания. Затем у нас есть функция тайм-аута, внутри которой мы будем извлекать данные, используя URL-адрес, который мы получили от других компонентов при вызове этого хука.
После получения ответа от сервера, если ответ неверный, мы выдаем ошибку. С другой стороны, если ответ был удовлетворительным, мы получаем данные.
Получив данные, мы устанавливаем данные в нашей переменной data, устанавливаем error на null и устанавливаем isPending на false.
Затем к нему прикрепляется catch функция, которая обнаруживает любую ошибку, которую мы могли бы создать в этой функции.
Если это была ошибка прерывания, что означает, что мы прервали вызов, в журнал записывается, что мы прервали вызов консоли. Если у нас есть какая-либо другая ошибка, мы сохраняем ее в переменной ошибки и устанавливаем isPending на false.
Мы передаем URL-адрес в ловушке useEffect, что означает, что всякий раз, когда мы меняем URL-адрес, будет вызываться ловушка useEffect и извлекать данные.
Затем мы возвращаем все data, isPending и error как объект из этой функции.
Итак, это было все для этой части. В следующей части серии мы завершим работу над приложением для блога со всеми оставшимися небольшими компонентами, а также узнаем, как настроить наш локальный сервер JSON, с которого мы получаем все данные.
Я надеюсь, что вам понравилась эта статья, и я надеюсь, что вы с нетерпением ждете следующей части этой серии, которая завершит проект блога.
Следующие части серии: -
Больше контента на plainenglish.io
