Next.js useDebouncedCallback 似乎没有延迟请求

Question

我正在学习 Next.js 教程。目前我被困在这个页面上： https://nextjs.org/learn/dashboard-app/adding-search-and-pagination

经过彻底的网络搜索没有明确的答案，我想向您咨询。谢谢。

  function handleSearch(term: string) {
    const handleSearch = useDebouncedCallback((term) => {
      console.log(`Searching... ${term}`);
      const params = new URLSearchParams(searchParams);
      if (term) {
        params.set('query', term);
      } else {
        params.delete('query');
      }
      replace(`${pathname}?${params.toString()}`);
    }, 300); 
  }

这个想法是，输入字段中填写的任何内容都会作为参数传递给 url，然后用于在数据库中进行搜索。如果没有 useDebouncedCallback 函数，将在每次键入字母后查询数据库。 useDebouncedCallback 应将数据库查询延迟到用户停止输入后 300 毫秒。

教程解释说，在控制台日志中，在添加 useDebouncedCallback 函数之前，搜索名称“Emil”的输出将是这样的：

Searching... E
Searching... Em
Searching... Emi
Searching... Emil

添加 useDebouncedCallback 函数后，输入“Emil”的输出将仅显示整个搜索词，如下所示：

Searching... Emil

但是，我的控制台仍然显示逐个字母的输出。 url 搜索参数也会在每个字母后更新，而不是在最后一个字母后 300 毫秒更新。因此在每个字母之后仍然查询数据库。

我的问题是：这段代码（直接从教程中复制）是否有错误或者这是预期的行为？我是不是理解错了什么？

Answer 1

此函数将包装handleSearch的内容，并且仅在用户停止输入后的特定时间（300毫秒）后运行代码。

这来自您提供的文档。此代码仅阻止内部函数的快速重新运行，如果您输入每个字符的速度低于 300 毫秒，您将看到每个字母。