如何在useQuery的fetch函数中实现防抖处理？

要实现仅对数据获取操作添加防抖延迟，同时让isLoading、isFetching等状态正常响应，最合理的方式是通过防抖处理请求参数，而不是直接防抖请求函数。这样只有当参数稳定后，useQuery才会触发实际请求，状态也会在请求真实发起时更新。

具体实现步骤 #

1. 引入防抖钩子
   可以使用react-use库中的useDebounce（也可以自行实现简单的防抖逻辑）：

   import { useDebounce } from 'react-use';
   

2. 对需要防抖的参数进行处理
   通常防抖主要针对搜索关键词这类高频变化的参数，这里我们对searchQuery设置500ms的防抖延迟：

   // 防抖延迟可根据业务需求调整，比如500ms
   const debouncedSearchQuery = useDebounce(searchQuery, 500);
   

3. 修改useQuery的依赖与请求参数
   将防抖后的参数替换到useQuery的查询键和fetchRows调用中，确保只有参数稳定后才触发请求：

   const {
       data: responseData,
       isLoading,
       isError,
       error,
       isFetching,
   } = useQuery<ResponseData, Error>(
       // 查询键使用防抖后的参数，确保仅在参数稳定时触发请求
       ["rows", page, rowsPerPage, debouncedSearchQuery],
       // 请求函数传入防抖后的参数
       () => fetchRows(page, rowsPerPage, debouncedSearchQuery),
       {
           keepPreviousData: true,
           retry: 0,
           refetchOnWindowFocus: false,
           refetchOnMount: false,
       }
   );
   

原理说明 #

• 当searchQuery快速变化时，debouncedSearchQuery会等待设定的延迟时间后才更新为最终值，useQuery只有在debouncedSearchQuery更新时才会发起请求，从而实现数据获取的防抖。
• isLoading、isFetching等状态会在useQuery实际发起请求时同步变化，不会被防抖延迟，完全符合需求。

扩展：如果需要对多个参数防抖 #

如果page或rowsPerPage也需要防抖，同样用useDebounce处理即可：

const debouncedPage = useDebounce(page, 500);
const debouncedRowsPerPage = useDebounce(rowsPerPage, 500);

然后将这些防抖后的参数一同加入查询键和请求函数参数中。

内容的提问来源于stack exchange，提问作者ffaarry