реагировать на автозаполнение с помощью функции debounce и differentUntilChanged - PullRequest
Новая
       43

реагировать на автозаполнение с помощью функции debounce и differentUntilChanged

3 голосов
/ 26 июня 2019

Намерение:

Я пытаюсь создать идеальное поле поиска, которое не будет вызывать никаких вызовов API до тех пор, пока:

  1. Достигнуто время отката 350 мс
  2. И пока не произойдет изменение значения поля ввода.

То, что я пробовал до сих пор:

Я использовал тему, чтобы отслеживать изменения вполе ввода.Каждый раз, когда происходит изменение в поле ввода и вызывается handleSuggestionsFetchRequested, я нажимаю новое значение вниз по Subject, используя searchString$.next(userInput);

И в хуке useEffect, я pipe с searchString$ с debounceTime(350) и distinctUntilChanged().Примерно так: 

useEffect(() => {
  searchString$
  .pipe(
    debounceTime(350),
    distinctUntilChanged(),
    switchMap(searchString =>
      ajax(`https://api.github.com/search/users?q=${searchString}`)
    ),
    map((networkResponse: any) => networkResponse.response.items)
  )
  .subscribe((suggestions: Array<User>) => setSuggestions(suggestions));
}, [searchString$]);

Но вызовы API продолжаются каждый раз, когда происходит изменение в userInput.

Проблема:

Я думаю, что проблема заключается в том, что каждыйКогда значение поля ввода изменяется, я также устанавливаю состояние: 

const handleChange = (
  event: React.ChangeEvent<{}>,
  { newValue }: Autosuggest.ChangeEvent
) => {
  setUserInput(newValue);
};

Это вызывает повторную визуализацию компонента и вызывает useEffect, что в конечном итоге снова вызывает API иснова.

Я могу ошибаться.

Как копировать:

Я создал Образец песочницы Код , который повторяет проблему.

Заранее большое спасибо.

1 Ответ

2 голосов
/ 26 июня 2019

Благодаря комментариям yurzui к моему твиту я смог выяснить причину проблемы.

Я создавал новый Subject при каждой сверке в виде строки: 

const searchString$: Subject<string> = new Subject<string>();

находился прямо внутри функции моего компонента.

Я переместил ее, и она работала как шарм.

ПРИМЕЧАНИЕ:Как подсказывает yurzui , не забывайте отлавливать ошибки в вызове ajax, иначе Subject умрет.

Я обновил Образец песочницы кода, на всякий случай, если кому-то понадобитсясослаться на это.

...