Поиск и фильтрация данных — обычная функция для веб-сайтов и приложений, особенно для электронной коммерции. В этой статье мы рассмотрим, как построить функцию поиска и фильтрации продуктов с помощью React. Данные о товарах будут запрашиваться из безголовой CMS (Cosmic), а пользовательский интерфейс будет обновляться мгновенно. Мы также поговорим о том, как техника debounce справляется с управлением состоянием с помощью Hooks и оптимизацией использования API.
Установка демонстрационного содержимого шаблона
Чтобы начать работу с этим примером, установите шаблон uNFT Marketplace, который включает демо-контент, который мы будем использовать для функциональности поиска и фильтрации. Или вы можете пропустить этот шаг и просто следовать за кодом.
- Войдите в свой аккаунт Cosmic.
- Перейдите в uNFT Marketplace и нажмите «Выбрать шаблон».
- Выполните шаги по созданию нового проекта и ведра и импортируйте демо-контент.
- Посмотрите на демо-контент, который теперь установлен в вашем Bucket.
- Перейдите в раздел «Продукты» и обратите внимание на метаполя, которые содержат данные, которые мы будем использовать для функции поиска / фильтра React.
Создание приложения React для поиска/фильтра
Чтобы упростить задачу, мы уже создали небольшое приложение с функцией поиска / фильтра, доступное на StackBlitz.
Используя Cosmic API, мы можем фильтровать результаты поиска продуктов по критериям поиска. Теперь давайте посмотрим, как это работает.
Создание запроса на поиск / фильтр
Чтобы отфильтровать продукты в нашей функции, нам нужно отправить запрос к Cosmic API, чтобы получить только те продукты, которые соответствуют критериям поиска. Для этого мы будем использовать Cosmic Queries.
Чтобы создать запрос, мы создаем объект query со свойствами, которые соответствуют значениям метаданных объекта, которые мы ищем, например color, price и categories.
Ниже приведен пример с комментариями, объясняющими, что делает каждое свойство запроса.
const query = {
// Find Objects in products Object Type
"type":"products"
// Find products with a price greater than or equal to 10 and less than or equal to 100
"metadata.price":{
"$gte":10,
"$lte":100
},
// Find products that have the color Blue
"metadata.color":"Blue",
// Find products that have the category Sale (uses category Object id)
"metadata.categories":"627e23f18bb13a000911ea55",
}
После создания запроса мы отправляем его в модуль Cosmic NPM с помощью метода getObjects. Мы используем props, чтобы ограничить ответ только теми свойствами, которые нам нужны. Вот пример того, как выглядит реализация.
import Cosmic from 'cosmicjs';
const bucket = Cosmic().bucket({
slug: "YOUR_COSMIC_BUCKET_SLUG",
read_key: "YOUR_COSMIC_BUCKET_READ_KEY",
});
const params = {
query,
props: 'title,slug,metadata,created_at'
}
const data = await bucket.getObjects(params);
Теперь давайте разберемся, как React обрабатывает обновления состояния пользовательского интерфейса с помощью крючков.
React Hooks
React использует односторонний поток данных, передавая данные по иерархии компонентов от родительских компонентов к дочерним, а крючки позволяют функциональным компонентам иметь доступ к состоянию. При каждом обновлении полей ввода для поиска и фильтра мы добавляем состояние в приложение React с помощью хука состояния useState.
// App.js
const [search, setSearch] = useState('');
const [{ min, max }, setRangeValues] = useState({ min: '', max: '' });
Чтобы отобразить отфильтрованные данные на веб-странице, мы отображаем массив filterResult
и отобразим соответствующий список продуктов.
// App.js
<div className={styles.list}>
{filterResult?.length ? (
filterResult?.map(product => (
<Card className={styles.card} item={product} key={product.slug} />
))
) : (
<p className={styles.inform}>Try another category!</p>
)}
</div>
React Custom Hook useDebounce
Когда пользователь вводит что-то в поле ввода, состояние переменной search обновляется. Для улучшения работы поиска и фильтрации мы создадим пользовательский хук React useDebounce.
Этот хук включает отбой, который очищает любое быстро меняющееся значение. Отложенное значение будет отражать последнее значение, только если хук useDebounce не был вызван в течение указанного периода времени. При использовании в сочетании с useEffect вы можете гарантировать, что дорогостоящие операции, такие как вызовы API, не будут выполняться слишком часто.
// utils/hooks/useDebounce.js
import { useState, useEffect } from 'react';
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
// Update debounced value after delay
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
// Cancel the timeout if value changes (also on delay change or unmount)
return () => {
clearTimeout(handler);
};
}, [value, delay]); // Only re-call effect if value or delay changes
return debouncedValue;
}
export default useDebounce;
Приведенный ниже пример позволяет выполнять поиск в Cosmic API и использует useDebounce, чтобы предотвратить вызов API при каждом нажатии клавиши. Цель состоит в том, чтобы вызов API срабатывал только тогда, когда пользователь перестает набирать текст, поэтому мы не будем быстро нажимать на Cosmic API.
// App.js
const [search, setSearch] = useState('');
// Debounce search term so that it only gives us latest value
// If search has not been updated within last 500ms, query the Cosmic API
const debouncedSearchTerm = useDebounce(search, 500);
useEffect(() => {
let isMount = true;
if (isMount && debouncedSearchTerm?.length) {
handleFilterDataByParams({
search: debouncedSearchTerm,
});
}
return () => {
isMount = false;
};
}, [debouncedSearchTerm]);
Заключение
Поиск и фильтрация — обычная функция для многих веб-сайтов и приложений, которая может оказаться сложной для создания. Но если использовать правильные инструменты и методы, создание этой функции может стать проще и приятнее для конечного пользователя.
В этой статье мы показали вам, как можно использовать Cosmic Queries, React Hooks и debounce для создания отличного поиска и фильтрации. Все примеры, описанные в этой статье, являются частью шаблона приложения uNFT Marketplace. Вы можете посмотреть полную демонстрацию здесь, установить шаблон приложения в вашей панели Cosmic или клонировать репозиторий GitHub. Чтобы узнать больше о Cosmic Queries, перейдите в документацию Cosmic.
Если у вас есть вопросы по интеграции и возможностям Cosmic, вы можете связаться с ними в Twitter, Slack или подписаться на канал YouTube.