RTK Query hooks 可以在 React 组件中有条件地调用吗？

Question

我正在使用 RTK 查询，并且应用程序中需要有条件地调用某些查询，因此我通过使用 if/else 条件并在 if/else 块内调用查询钩子而不是使用 Skip prop 来做到这一点，并且amzaingly它有效绝对没问题，反应没有抛出任何错误，甚至没有警告。为什么？我们知道 React 严格要求在组件顶部使用钩子，而不是有条件地调用它们。

  let organizations;
  if (role !== 'teamAdmin' && role !== 'orgAdmin') {
    const { data: response } = useGetOrganizationsQuery({});
    organizations = response;
  }

所以我的问题是这如何运作？

Answer 1

RTK 中的

useQuery

钩子有一个名为

enabled

的字段，它的作用是，当该字段为 false 时，它将禁用查询自动运行。

因此，您可以做的是将

role

作为道具传递给

useGetOrganizationsQuery

钩子，然后将条件添加到启用字段，如下所示：

useQuery({
queryKey: ['organizations'],
queryFn: fetchOrganizations,
enabled: role !== 'teamAdmin' && role !== 'orgAdmin',
})

这样，您的获取请求仅在您的角色不是

orgAdmin

和

teamAdmin

时运行。

有关

enabled

字段的更多信息：https://tanstack.com/query/v5/docs/framework/react/guides/disabling-queries