Представьте себе сценарий - вы хотите делать запрос к своему API каждый раз, когда пользователь вводит значение во входные данные, и вы не хотите, чтобы им приходилось нажимать кнопку каждый раз, когда они хотят запустить поиск.
Вместо этого вы хотите делать запрос, когда пользователь перестает печатать, но не при каждом нажатии клавиши, чтобы не было чрезмерной нагрузки на API, а также чтобы пользователь не был представлен с мерцающим списком результатов.
Требования к решению следующие:
- Используется контролируемый ввод
- Запрос на поиск выполняется только тогда, когда пользователь перестает печатать
Во-первых, мы начнем с старого доброго управляемого ввода:
Самый простой способ реализовать логику противодействия - использовать функцию debounce, предоставляемую очень популярной библиотекой утилит https://lodash.com/.
Выполните следующую команду, чтобы установить его в свой проект:
npm i lodash
Затем мы хотим настроить нашу функцию защиты от ошибок. Логика должна быть размещена вне компонента и вызываться внутри компонента только при изменении inputValue, в противном случае функция противодействия будет перестраиваться при каждом рендеринге и не будет работать.
Здесь функция search размещается вне компонента, и теперь она будет должным образом устранена - она будет вызываться с последним значением inputValue через 500 миллисекунд после последнего изменения переменной состояния.
Рабочий код для этого доступен здесь:
