React Query触发refetch时如何将isLoading状态设置为true？

默认情况下，React Query的useQuery中，isLoading仅在首次发起查询时为true，手动调用refetch时只会触发isFetching变为true，但你需要的是在refetchCompanies触发时，让控制加载组件的isLoadingCompanies状态置为true，以此触发重渲染并显示<LoadingDataSpinner/>。

解决方案：自定义加载状态配合useQuery回调 #

通过自定义本地状态来统一控制首次加载和refetch时的加载状态，具体步骤如下：

1. 定义本地加载状态

import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';

// ...其他代码

const [isLoadingCompanies, setIsLoadingCompanies] = useState(false);

2. 修改useQuery配置并封装refetch函数

const {
    isLoading: initialLoading,
    data: dataCompanies,
    refetch: originalRefetch
} = useQuery(
    "queryCompanies",
    () => companySearchQuery(currentPage, searchTerm, token),
    {
        // 请求成功/失败后重置加载状态
        onSuccess: () => setIsLoadingCompanies(false),
        onError: () => setIsLoadingCompanies(false)
    }
);

// 封装refetch函数，调用前先设置加载状态
const refetchCompanies = () => {
    setIsLoadingCompanies(true);
    originalRefetch();
};

// 同步首次加载的状态
useEffect(() => {
    if (initialLoading) {
        setIsLoadingCompanies(true);
    } else if (!initialLoading && isLoadingCompanies) {
        setIsLoadingCompanies(false);
    }
}, [initialLoading]);

3. 更新组件渲染逻辑
   注意：原代码中companies应为dataCompanies（useQuery返回的data字段），同时给列表项加上唯一key：

<div>
    {!isLoadingCompanies && dataCompanies?.map((company, index) => (
        <h3 key={index}>{company?.name}</h3>
    ))}  
    {isLoadingCompanies && <LoadingDataSpinner/>}
</div>

逻辑说明 #

• 自定义isLoadingCompanies状态，统一管理首次加载和refetch时的加载状态；
• 封装refetchCompanies，调用时先将加载状态设为true，再执行原refetch方法；
• 通过useQuery的onSuccess和onError回调，在请求完成后重置加载状态；
• 用useEffect监听首次加载的initialLoading状态，同步到自定义的加载状态中。

这样就能实现：无论首次加载还是手动调用refetchCompanies，isLoadingCompanies都会正确变为true，触发组件重渲染并显示加载 spinner，完全符合你的需求。

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