React フック「useGetCatalogueDataByIdQuery」が条件付きで呼び出されます。 React フックは、すべてのコンポーネントのレンダリングでまったく同じ順序で呼び出す必要があります [クローズド]

概要

カタログ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

この問題はどうすれば解決できますか?

解決策

useGetCatalogueDataByIdQuery を条件付きで使用する代わりに、そのロジックを条件付きで実行する 2 番目のパラメーターを追加するだけです。

  const { data } = useGetCatalogueDataByIdQuery({ catalogueId: CatalogueIdFromStore, queryParams: '' }, {
    skip: !CatalogueIdFromStore
  });

useGetCatalogueDataByIdQuery でスキップ値を確認し、それに応じてロジックを実行します。

export const useGetCatalogueDataByIdQuery = (param1, param2) => {
  if (!param2) {
     // your logic
  }
}