NextJS function with lodash debounce is not working [TypeError: search(...) is undefined]

Question

我一直在尝试在 NextJS 中制作一个组件，该组件使用基于给定输入的搜索 youtube。为了减少 API 调用的次数，我将 lodash debounce 与 useCallback 挂钩一起使用，但我不断收到此错误：TypeError: search(...) is undefined

这是我写的代码：

export default function Player() {
  const [modalVisibility, setModalVisibility] = useState(true);

  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  const search = useCallback(
    debounce(async (keyword) => {
      const response = await fetch("http://localhost:3000/api/search/" + keyword); 
      const data = await response.json();
      return data;
    }, 500),
    []
  );

  useEffect(() => {
    if (searchQuery) {
      search(searchQuery).then((results) => setSearchResults(results));
      console.log(searchQuery)
      console.log(searchResults)
    } else {
      setSearchResults([])
    }
  }, [searchQuery])


  return (
    <Modal label={'Search for videos'} show={modalVisibility} handleClose={() => setModalVisibility(false)}>
      <div>
        <IoSearch size='1.25em' color={searchQuery ? '#000' : '#9ca3af'}/>
        <input type="text" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="eg: 'Standup Comedy'"/>
      </div>
      <SearchResults results={searchResults}/>
    </Modal>
  )
}

谁能帮我弄清楚为什么我的搜索函数未定义？

Answer 1

debounce 不会 return 来自内部函数的值，除非您为其指定 leading: true 选项。

所以这不是你的 search 未定义，而是没有承诺，也没有 then(...) return 来自 search(...) 调用。

无论如何，我建议您将 setSearchResults 移到 search 函数中。如果用户键入某些内容然后快速删除查询，您仍然会遇到竞争条件。

Answer 2

要使用去抖动 searchQuery，您不需要对执行调用的函数进行去抖动，而是对搜索值进行去抖动。您也根本不需要将 fetch 函数包装在 React.useCallback 中，只需直接在 useEffect

中使用它

我建议使用 useDebounce 钩子来消除搜索查询。

 const debouncedSearchQuery = useDebounce(searchQuery, 500);

 useEffect(() => {
    if (debouncedSearchQuery) {
      fetch(`http://localhost:3000/api/search/${debouncedSearchQuery}`).then((data) => {
        console.log(debouncedSearchQuery);
        setSearchResults(data);
        console.log(searchResults);
      });
    } else {
      setSearchResults([]);
    }
  }, [debouncedSearchQuery]); // Only call effect if debounced search term changes

NextJS function with lodash debounce is not working [TypeError: search(...) is undefined]

NextJS function with lodash debounce is not working [TypeError: search(...) is undefined]

lodash

reactjs

next.js

react-hooks