Lodash 油門在 React 中無法正常工作

Question

我有一個 function 可以過濾一些 state 並呈現搜索請求的結果。

  const handleSearch = (value: string) => {
   const searchResultData = users.filter((userId) => user.id.startsWith(value));
   setSearchResult(searchResultData);
  };

我正在嘗試使用lodash.throttle庫在發送請求之前造成延遲。 因此，我們不會在每次用戶鍵入時發出請求 go。

 const handleSearch = useCallback(throttle((value: string) => {
  const searchResultData = users.filter((userId) => user.id.startsWith(value));
  setSearchResult(searchResultData);
 }, 2500), []);

這可以按預期延遲輸入，但由於某種原因， user.filter方法不會運行，因此 state 不會隨搜索結果一起更新。 我相信問題可能出在useCallback掛鈎上，但throttle function 依賴於它運行。 關於如何解決此問題的任何想法？

Answer 1

如果您的 throttled/debounced 處理程序使用 props 或 state，如下所示：

const { fetcherFunctionFromProps } = props;

const eventHandler = async () => {
  const resp = await fetcherFunctionFromProps();
};    

const debouncedEventHandler = useMemo(
  () => throttle(eventHandler, 300)
), [fetcherFunctionFromProps]);

它不起作用，
您可以將其重構為以下內容：

const { fetcherFunctionFromProps } = props;

const eventHandler = async (fetcher) => {
  const resp = await fetcher();
};

const debouncedEventHandler = useMemo(() => throttle(eventHandler, 300), []);
...
<Component onClick={() => debouncedEventHandler(fetcherFunctionFromProps)}>