带有lodash反跳的NextJS函数不工作[TypeError:search(..)未定义]

Question

我一直在尝试在NextJS中制作一个组件，该组件使用基于给定输入的搜索youtube。为了减少API调用的数量，我使用了带有useCallback钩子的lodash debounce，但我一直得到这个错误：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不会从内部函数返回值，除非您为其指定leading: true选项。

因此，并不是您的search未定义，而是没有承诺，也没有从search(...)调用返回then(...)。

无论如何，我建议您将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