Поиск и фильтрация данных — обычная функция для веб-сайтов и приложений, особенно для электронной коммерции. В этой статье мы обсудим, как создать функцию поиска и фильтрации продуктов с помощью React. Данные о продукте будут запрашиваться из безголовой CMS (Cosmic) с мгновенным обновлением пользовательского интерфейса. Мы также поговорим о том, как техника debounce справляется с управлением состоянием с помощью хуков и оптимизации использования API.
Установить демо-контент шаблона
Чтобы начать работу с этим примером, установите шаблон uNFT Marketplace, который включает демо-контент, который мы будем использовать для функций поиска и фильтрации. Или вы можете пропустить этот шаг и просто следовать коду.
- Войдите в свой Космический аккаунт.
- Зайдите в uNFT Marketplace и нажмите Выбрать шаблон.
- Следуйте инструкциям, чтобы создать новый проект и корзину и импортировать демо-контент.
- Посмотрите демо-контент, установленный в вашем Bucket.
- Перейдите в «Продукты» и обратите внимание на метаполя, которые содержат данные, которые мы будем использовать для нашей функции поиска/фильтрации React.
Создайте приложение React для поиска/фильтрации
Чтобы упростить задачу, мы уже создали небольшое приложение с функцией поиска/фильтрации, доступной на StackBlitz.
Используя Cosmic API, мы можем фильтровать результаты продукта по критериям поиска. Теперь давайте посмотрим, как это работает.
Создайте поисковый/фильтрующий запрос
Чтобы отфильтровать продукты в нашей функции, нам нужно будет отправить запрос в Cosmic API, чтобы получить только продукты, соответствующие критериям поиска. Для этого мы будем использовать Космические запросы.
Чтобы создать запрос, мы создаем объект query со свойствами, которые совпадают со значениями метаданных объекта, которые мы ищем, например color, price и categories.
Вот пример с комментариями, чтобы объяснить, что делает каждое свойство запроса.
После того, как мы построили наш запрос, мы отправляем запрос в Космический модуль NPM с помощью метода getObjects. Мы используем props, чтобы ограничить ответ только теми свойствами, которые нам нужны. Вот пример того, как выглядит реализация.
Теперь давайте подробно рассмотрим, как React обрабатывает обновления состояния пользовательского интерфейса с помощью хуков.
Реагировать на крючки
React использует односторонний поток данных, передавая данные вниз по иерархии компонентов от родительских к дочерним компонентам, а хуки позволяют функциональным компонентам иметь доступ к состоянию. Для каждого обновления поиска и фильтра в полях ввода мы добавляем состояние в приложение React, используя хук состояния useState.
Чтобы отобразить отфильтрованные данные на веб-странице, мы сопоставляем массив filterResult
и отображаем соответствующий список продуктов.
Использование пользовательского хука ReactDebounce
Когда пользователь вводит что-то в поле ввода, состояние переменной search будет обновлено. Чтобы улучшить поиск и фильтрацию, мы создадим React Custom Hook useDebounce.
Этот хук включает откат, который очищает любое быстро меняющееся значение. Значение debounced будет отражать только последнее значение, когда хук useDebounce не вызывался в течение указанного периода времени. При использовании в сочетании с useEffect вы можете гарантировать, что дорогостоящие операции, такие как вызовы API, не будут выполняться слишком часто.
Пример ниже позволяет выполнять поиск в Cosmic API и использует useDebounce для предотвращения запуска вызовов API при каждом нажатии клавиши. Цель состоит только в том, чтобы вызов API срабатывал, когда пользователь перестает печатать, поэтому мы не сталкиваемся с космическим API быстро.
Заключение
Поиск и фильтрация являются общей функцией многих веб-сайтов и приложений, создание которых может оказаться сложным. Но с помощью правильных инструментов и методов создание этой функции может быть проще и приятнее для конечного пользователя.
В этой статье мы показали вам, как вы можете использовать Cosmic Queries, React Hooks и debounce, чтобы создать отличный поиск и фильтрацию. Все примеры, описанные в этой статье, являются частью шаблона приложения uNFT Marketplace. Вы можете просмотреть полную демонстрацию здесь, установить шаблон приложения в своей панели управления Cosmic или клонировать репозиторий GitHub. Чтобы узнать больше о Cosmic Queries, перейдите в Космическую документацию.
Если у вас есть какие-либо вопросы об интеграции и функциях Cosmic, вы можете задать их в Twitter, Slack или подписаться на канал YouTube.
