react-query封装在store内的依赖查询enabled属性失效如何解决

• 违反React Hook调用规则：useQuery是标准React Hook，仅支持在React函数组件、自定义Hook的顶层作用域调用，你将它放在普通Class的实例方法中运行，React无法正常跟踪Hook的渲染上下文，enabled配置的判断逻辑自然无法按预期生效。
• Class单例模式会导致Hook状态混乱：你导出的是IntakeProgramStore的单例实例，多组件调用该方法时，Hook的状态会互相干扰，即使这次调整后临时生效，后续也会出现其他数据异常问题。
• 调用时参数传入不严谨：你在Sidebar组件中调用方法时传入的是student.id，如果student本身为undefined，会直接抛出取值错误，你后面写在组件内的版本用的是student?.id，才是正确的传参方式。

最符合React生态规范的方案是将查询逻辑封装为自定义Hook，完全替代原有Class方法的封装：

// 新建hooks/useIntakeProgramsByStudent.ts
import { useQuery } from '@tanstack/react-query';
import { intakeProgramService } from '你的服务路径';

export const useIntakeProgramsByStudent = (studentId: string | undefined) => {
  return useQuery(
    ['intakeProgram/studentId', studentId],
    () => intakeProgramService.getIntakeProgramsByStudent(studentId!),
    { enabled: !!studentId }
  );
};

在Sidebar组件中直接调用该自定义Hook即可：

// Sidebar.tsx
const { data } = useIntakeProgramsByStudent(student?.id);
const programs = data?.data.data[0];

如果你确实需要保留Class Store的结构（比如结合MobX等状态管理库使用），请不要在Store的方法中调用任何React Hook，将useQuery的调用逻辑全部放在组件/自定义Hook中，Store仅负责存储公共状态、提供原始请求方法即可。

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