React Query未随QueryKey中应用名变化自动重取数据问题

核心原因 #

你在ManageByActionTab中调用useGet时传入了固定的false作为第三个参数，假设该参数对应React Query的enabled配置项，这会导致该查询始终处于禁用状态，无法自动响应QueryKey的变化（包括selectedApplication更新带来的QueryKey变更），只能通过手动调用refetch触发数据获取。而其他标签页的useGet未设置enabled: false，因此能正常自动重取数据。

修复步骤 #

1. 修改ManageByActionTab中的useGet调用，将第三个参数从固定false改为根据selectedApplication动态判断的启用条件：

const {
  data: actions,
  refetch: refetchActions,
  isLoading,
} = useGet<ActionManageEntity[]>(
  ASFqueryKeys.manage.item("actions", selectedApplication ?? ""),
  fetchBase,
  !!selectedApplication, // 当selectedApplication存在时启用查询
);

2. 移除手动触发重取的useEffect，React Query会自动监听QueryKey的变化，当selectedApplication更新时，QueryKey改变后查询会自动重新执行：

// 删除这段手动refetch的代码
// useEffect(() => {
//   if (selectedApplication && selectedApplication !== "") {
//     refetchActions();
//     if (selectedActionId) {
//       refetchActionDetails();
//     }
//   }
// }, [
//   selectedApplication,
//   fetchBase,
//   refetchActionDetails,
//   refetchActions,
//   selectedActionId,
// ]);

额外验证点 #

• 确认你的useGet封装确实将第三个参数映射为React Query的enabled选项。如果封装逻辑不同，需检查useGet内部是否正确传递依赖项，确保QueryKey变化时能触发查询更新。
• 对比其他标签页（如ManageByGroupTab）的useGet调用配置，确认它们未设置enabled: false，以此佐证问题根源。

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