Еще одна очень востребованная функция, которая состоит из:
В зависимости от того, что пользователь вводит при вводе, мы должны показывать предложения, которые есть в нашей базе данных.
Обычно он используется в электронной коммерции, поскольку позволяет улучшить взаимодействие с пользователем и совершать покупки быстрее.
для нашего примера мы будем использовать в качестве бэкенда API https://api.publicapis.org/
Это позволяет в соответствии с параметром найти общедоступный API для использования.
затем мы создадим вход, который в соответствии с тем, что вводит пользователь, мы покажем ему список общедоступных API, которые соответствуют поисковому запросу.
для этого компонента нам потребуются следующие библиотеки:
yarn add axios (для выполнения запросов API)
yarn add styled-components (чтобы создать css с помощью javascript, кстати, вы можете реализовать код в обычном файле sass)
yarn add lodash.debounce (более подробно мы рассмотрим позже)
начнем
сначала давайте создадим наш файл request.js
Он будет отвечать за отправку запроса к API.
теперь давайте создадим наш компонент searchInput, сначала нам нужен стиль с небольшой помощью стилизованных компонентов
теперь наш компонент
теперь давайте разберемся с параметрами:
загрузка: это состояние передается от родителя, это позволит отображать сообщение о загрузке, пока мы делаем соответствующий запрос.
options: это массив объектов которые мы хотим показать как предложения.
запросы: это запрос, в котором мы будем выполнять поиск, у родителя есть функция, но именно этот компонент выполняет ее.
функции:
updateValue: мы в основном работаем с контролируемыми компонентами, эта функция отвечает за установку нового входного значения и отправку этого значения в наши запросы.
важная часть кода рендеринга:
Пояснение:
В качестве ключа мы используем имя API плюс индекс, просто чтобы избежать предупреждения, но правильно то, что он имеет свой уникальный идентификатор.
сначала мы проверяем, является ли загрузка истинной, если это так, отображается только значение загрузки, пока запросы завершены
наша вторая проверка гарантирует, что загрузка ложна, и что наш массив параметров содержит какое-то значение для отображения, в противном случае оно игнорируется.
.? является необязательным изменением, позволяющим считывать значение свойства, расположенного в цепочке связанных объектов, без необходимости явного подтверждения того, что каждая ссылка в цепочке действительна.
Другими словами, это позволит избежать этого, если свойства записи не существует, массива нет, или он будет отображать нулевой объект
давайте создадим наше приложение
функции:
getSuggestions: это функция, которую мы передадим нашему компоненту, она сначала проверяет наличие значения для поиска (мы не будем отправлять пустые значения, это будет бессмысленный запрос)
Если он не существует, мы очищаем объект параметров, чтобы не показывать предложения, если условие поиска пусто.
После этого, используя преимущества асинхронного ожидания, мы ждем завершения запроса и возвращаем значение, и мы устанавливаем его в опциях, это состояние, которое мы передадим компоненту.
getApiUrl: мы передадим эту функцию компоненту, она в основном открывает URL-адрес в новой вкладке.
со всем вышеперечисленным наш компонент должен работать следующим образом
это работает, но вы видели проблему?.
на каждое письмо мы делаем запрос к апи.
это вредно представьте, что 10 тысяч пользователей используют ваш проект и за поиск каждый пользователь в итоге получает 20 000 запросы к API, это неустойчивая и плохая практика.
Итак, как мы ее решим? отмена дребезга
что такое устранение дребезга?
это функция, которая возвращает функцию, которую можно вызывать любое количество раз (возможно, в быстрой последовательности), но вызовет обратный вызов только после ожидания x мс от последней вызов.
давайте перестроим наш searchInput
функции:
debouncedSave:
сначала используйте обратный вызов, передайте обратный вызов онлайн и массив зависимостей. useCallback вернет запомненную версию обратного вызова, которая изменится только в случае изменения одной из зависимостей.
затем с помощью debounce из lodash.debounce мы сообщаем ему, что эта функция будет запущена через определенное время.
в таким образом, мы разрешаем выполнение запроса только через определенное время, позволяя пользователю написать свой реальный поиск, а не бросать запросы как сумасшедшие.
давайте посмотрим, как это работает на практике
eureka, теперь с нашим устранением дребезга наша функция выполняет запрос только через определенное время, таким образом, мы даем пользователю время ввести действительный поисковый запрос.
Мы избегаем заполнения нашего API мусорными запросами, и мы улучшили пользователя опыт.
Что нужно улучшить:
Этот API не имеет ограничений, правильнее было бы установить лимит ответов на 3–5, так как отображение списка из 50 предложений не самое оптимальное. 3–5 вариантов в качестве предложений были бы идеальными.
Полный код:
