Lodash debounce error: Uncaught TypeError: Expected a functi

Question

我试图使用debounce函数来避免多次调用，当我在一个表中输入和搜索一些东西。这就是我所做的-

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

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

const onChange = React.useCallback((_event, searchText) => setSearchText(searchText), [])
//...
return (
<Component
//...
onChange={onChange}
/>
);

那么，对于debounce，你要找的是一个记忆函数:

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