React Query条件式API数据获取报错咨询：Hook条件调用问题

你遇到的错误是因为违反了React Hook的核心规则：所有Hook必须在组件的顶层作用域按固定顺序调用，不能放在if这类条件判断语句内部。

要实现条件式数据获取，React Query官方推荐使用enabled配置项，这是最符合Hook规则且优雅的方案，具体实现如下：

1. 修改自定义钩子，支持传入额外配置 #

让你的自定义钩子接收第二个参数，用于传递React Query的配置选项（比如enabled）：

export const useGetConsultasByStatusQueryDate = (
  query: { status: string; queryDate: string },
  options?: Parameters<typeof useQuery>[1]
) => {
  return useQuery({
    queryKey: ["consultas", { query }],
    queryFn: async () => {
      const consultas = await getQueryFetch(CONSULTAS_URI, query);
      return consultas as Consultas | undefined;
    },
    ...options // 合并外部传入的配置
  });
};

2. 在组件顶层调用钩子，通过enabled控制查询触发 #

把钩子移到组件顶层，用enabled选项指定只有当filter === "NEW"时才执行查询：

// 组件顶层调用，符合Hook规则
const { data, isLoading } = useGetConsultasByStatusQueryDate(
  {
    status: "NEW",
    queryDate: allTimeDateQuery(),
  },
  {
    enabled: filter === "NEW" // 条件满足时才启动查询
  }
);

补充说明 #

• 当enabled为false时，React Query不会执行queryFn，也不会触发加载状态，data会保持初始值（通常是undefined）。
• 如果后续filter从非"NEW"变为"NEW"，React Query会自动触发查询，无需额外处理。

内容的提问来源于stack exchange，提问作者Miguel Angel Marroquin Jordan