reactjs - 带有 debounce 和distinctUntilChanged 的​​react-autosuggest

Question

意图:

我正在尝试实现一个理想的搜索字段，在以下情况之前不会进行任何 API 调用:

1. 已达到 350ms 的去抖时间
2. 并且直到输入字段的值发生变化。

到目前为止我尝试过的:

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

在 useEffect Hook 中，我使用 debounceTime(350) 对 searchString$ 进行管道传输。和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 调用。

我可能是错的。

如何复制:

I've created a Sample Code Sandbox that replicates the issue.

提前非常感谢。

Answer 1

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

我在每次调节中创建一个新的主题，如下行:

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

就在我的组件函数内部。

我把它搬了出来，它的作用就像一个魅力。

注意:按照 yurzui 的建议，不要忘记捕获 ajax 调用中的错误，否则 Subject 将会死亡。

我已经更新了代码沙盒示例，以防万一有人需要引用它。