时间戳

首页 > 解决方案 > 带有 lodash debounce 的 NextJS 函数不起作用 [TypeError: search(...) is undefined]

reactjs - 带有 lodash debounce 的 NextJS 函数不起作用 [TypeError: search(...) is undefined]

问题描述

我一直在尝试在 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>
  )
}

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

标签： reactjsreact-hooksnext.jslodash

解决方案

debounceleading: true除非您为其指定选项，否则不会从内部函数返回值。

所以这不是你search的未定义，而是没有承诺，也没有then(...)从search(...)调用中返回。

无论如何，我建议你移动你的setSearchResults内部search功能。如果用户键入某些内容然后快速删除查询，您仍然会有竞争条件。

推荐阅读