React Query触发refetch时isLoading无法正确传递给Button的loading属性

你混淆了React Query（TanStack Query）中两个加载状态的语义，和组件重渲染没有关系：

• isLoading：仅在查询首次发起请求、本地无任何缓存数据时为true，专门用于标记首次进入页面的初始加载状态
• isFetching：只要查询当前处于请求进行中就为true，覆盖所有请求场景：初始自动加载、手动调用refetch触发的请求、后台自动重验、窗口聚焦重拉等
  你配置了enabled: false禁用了初始自动请求，根本不会触发首次加载的场景，后续手动调用refetch时，isLoading自然始终保持为false。

直接将传给Button组件loading属性的状态从isLoading替换为isFetching即可，修正后代码如下：

const MainPage: React.FC = () => {
    const {data, isFetching, error, refetch} = useQuery<any>(
        ["getCity"],
        () => fetchCities(),
        {
            enabled: false,
        }
    )

    return (
        <div>
            <div>
                {JSON.stringify(data)}
            </div>
            <Button
                loading={isFetching}
                label="get_cities"
                onClick={() => refetch()}
            >
            </Button>
        </div>
    )
}

export default MainPage;

日常开发中可以按照场景区分使用两个加载状态：

• 页面级首次加载、无数据时展示全屏骨架/空态：使用isLoading
• 按钮加载态、列表局部刷新提示、手动触发操作的加载反馈：使用isFetching

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