Lodash debounce error: Uncaught TypeError: Expected a function

Question

我正在尝试使用 debounce 函数来避免在 table 中输入和搜索内容时进行多次调用。这就是我所做的 -

onChange={(_event, searchText) => React.useCallback(debounce(void setSearchText(searchText), _searchDebounceWaitTime), [])}

它给出一个错误说明 Uncaught TypeError: Expected a function 我究竟做错了什么？我在网上找到的大多数解决方案都做了类似的事情。

注意：我也试过 -

onChange={(_event, searchText) => React.useCallback(debounce(searchText => setSearchText(searchText), _searchDebounceWaitTime), [])}

但是这次我得到了以下错误 - Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

请帮忙。

Answer 1

首先，如错误所述，反应钩子不能在 jsx 中。应该是这样的：

const onChange = React.useCallback((_event, searchText) => setSearchText(searchText), [])

//...
return (
  <Component
    //...
    onChange={onChange}
  />
);

那么，对于去抖动，你正在寻找的是一个记忆函数：

const onChange = React.useMemo(() => debounce((_event, searchText) => setSearchText(searchText), _searchDebounceWaitTime), [])

Lodash debounce error: Uncaught TypeError: Expected a function

Lodash debounce error: Uncaught TypeError: Expected a function

lodash

reactjs

debounce

react-hooks

react-functional-component