React Hook“useGetCatalogueDataByIdQuery”被有条件地调用。 React Hooks 必须在每个组件渲染中以完全相同的顺序调用

Question

我有这个组件，除非目录 id 存在，否则我不想使用所有 api

const GeneralInfoForm = ({ currentStep, setCurrentStep }: GeneralInfoFormValues) => {
  const user = getCurrentUser();
  const dispatch= useAppDispatch()
  // Mutation hook for adding catalogue info
  const [addCatalogueInfoMutation, { isLoading }] = useAddCatalogueInfoMutation();
  const CatalogueIdFromStore=useAppSelector((state)=>state.catalogueId.id)
  const { data} = CatalogueIdFromStore && useGetCatalogueDataByIdQuery({ catalogueId:CatalogueIdFromStore,queryParams:'' });
  console.log(data,"from general info")

但是它说

React Hook "useGetCatalogueDataByIdQuery" is called conditionally. React Hooks must be called in the exact same order in every component render.eslintreact-hooks/rules-of-hooks
(alias) useGetCatalogueDataByIdQuery<UseQueryStateDefaultResult<QueryDefinition<any, BaseQueryFn<FetchArgs, BaseQueryApi, DefinitionType>, "brand" | "draftsTask" | "allEmployees", any, "baseApi">>>(arg: any, options?: (UseQuerySubscriptionOptions & UseQueryStateOptions<...>) | undefined): UseQueryHookResult<...>
import useGetCatalogueDataByIdQuery

我该如何解决这个问题？

Answer 1

您遇到的错误是因为您根据 CatalogueIdFromStore 的值有条件地调用 useGetCatalogueDataByIdQuery 挂钩。 React hooks 必须无条件地调用，并且在每次渲染时都以相同的顺序调用，以确保一致的行为并避免错误。

因此，您可以创建一个自定义挂钩来获取目录数据，然后在 GeneralInfoForm 组件中调用自定义挂钩：