RTK Query设置{skip: true}仍在首次渲染调用查询的问题

你当前的问题是把skip参数放错了位置——useGetShipmentsQuery的第一个参数是查询参数（比如请求需要的路径变量、查询参数），而skip属于第二个参数的配置选项，所以之前的写法不会被RTK Query识别，导致初始查询依然执行。

正确写法1：用refetch手动触发查询 #

先通过配置skip: true阻止初始调用，再通过refetch方法在按钮点击时触发请求：

// 第一个参数传undefined（如果没有查询参数的话），第二个参数放配置
const { data, isLoading, isUninitialized, refetch } = useGetShipmentsQuery(
  undefined,
  { skip: true }
);

然后在按钮点击时调用refetch：

<button onClick={refetch}>加载物流数据</button>

正确写法2：用状态动态控制skip #

如果需要更灵活的触发逻辑，可以用状态变量控制skip的值：

import { useState } from 'react';

const [isFetchTriggered, setIsFetchTriggered] = useState(false);

const { data, isLoading } = useGetShipmentsQuery(
  undefined,
  // 当isFetchTriggered为true时，skip变为false，自动执行查询
  { skip: !isFetchTriggered }
);

按钮点击时切换状态：

<button onClick={() => setIsFetchTriggered(true)}>加载物流数据</button>

为什么之前的写法无效？ #

当你把{skip: true}作为第一个参数传递时，RTK Query会将其当作请求的查询参数（比如会被序列化为URL参数），而不是识别为配置选项。因此skip的设置完全没生效，查询会在组件渲染时自动执行，isUninitialized自然一直返回false。

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