react-autosuggest 与 debounce 和 distinctUntilChanged

Posted 2023-02-21

【中文标题】react-autosuggest 与 debounce 和 distinctUntilChanged

【英文标题】：react-autosuggest with debounce and distinctUntilChanged

【发布时间】：2019-11-07 21:33:14

【问题描述】：

意图：

我正在尝试实现一个理想的搜索字段，直到：

已达到 350ms 的去抖时间 AND 直到输入字段的值发生变化。

到目前为止我已经尝试过：

我使用主题来跟踪输入字段中的更改。每次输入字段发生变化并调用 handleSuggestionsFetchRequested 时，我都会使用 searchString$.next(userInput); 将新值向下推到 @​​987654323@

在useEffect 钩子中，我是pipeing 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 调用仍会继续。

问题：

我认为问题在于每次输入字段的值发生变化时，我也在设置状态：

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

这导致组件重新渲染并调用 useEffect，最终导致一次又一次地调用 API。

我可能错了。

如何复制：

我创建了一个 Sample Code Sandbox 来复制问题。

非常感谢。

【参考方案1】：

感谢 yurzui 在我的 tweet 上的 cmets，我能够找出问题的原因。

我在每次对帐时都创建了一个新的Subject：

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

就在我的组件函数中。

我把它移了出来，它就像一个魅力。

注意：正如 yurzui 所建议的，不要忘记在 ajax 调用中捕获错误，否则 Subject 将会死掉。

我已经更新了代码沙箱示例，以防万一有人需要参考它。