如何在 react useCallback 中调用 react hook

Question

I have a next.js react application.

There is a portion of my app which is called "Banners" i am building a "store" using the Context API. However when i call the "useFetchBanners" function within my page i get the following error. This function is used to set the initial state of the page.

1. React Hook "useFetchBanners" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function. [Error/react-hooks/rules-of-hooks]

BannersStore.tsx

import { createContext, useCallback, useContext, useState } from "react";
import { AppContext } from "src/contexts/app/AppContext";
import { GetBanners, IGetBannersQuery, IGetBannersResponse } from "src/services/BannersService.";

interface IBannerStore {
    isLoading: boolean;
}

const useStore = () => {
    const appContext = useContext(AppContext);
    const [isLoading, setIsLoading] = useState<boolean>(false);
    const [data, setData] = useState<IGetBannersResponse | null>(null);
    const [error, setError] = useState<any>(null);
    const [searchQuery, setSearchQuery] = useState<IGetBannersQuery>({});

    const fetchBanners = async (params: IGetBannersQuery) => {
        const [results, error] = await GetBanners(params, appContext.token);
        if (results.status !== 200 || error) {
            setError(error);
        }
        setData(results.data || null);
    };

    return {
        isLoading,
        setIsLoading,
        data,
        setData,
        searchQuery,
        setSearchQuery,
        fetchBanners: (params: IGetBannersQuery) => fetchBanners(params),
    };
};

const StoreContext = createContext<any>(null);

export const StoreContextProvider = ({ children }: any) => <StoreContext.Provider value={useStore()}>{children}</StoreContext.Provider>;

export const useIsLoading = () => useContext(StoreContext).isLoading;
export const useSetIsLoading = () => useContext(StoreContext).setIsLoading;
export const useData = () => useContext(StoreContext).data;
export const useSetData = () => useContext(StoreContext).setData;
export const useSearchQuery = () => useContext(StoreContext).searchQuery;
export const useSetSearchQuery = () => useContext(StoreContext).setSearchQuery;
export const useFetchBanners = (params: IGetBannersQuery) => useContext(StoreContext).fetchBanners;

I want to call the function useFetchBanners to set the initial data when the page loads. (taking into account the existing browser params that might exist)

BannersPage.tsx

...
   const init = useCallback(async () => {
        if (router.isReady === false) {
            return;
        }
        let loadBrowserSearchParams = null;
        if (!_.isEmpty(router.query)) {
            loadBrowserSearchParams = {
               ...
             }
        }

        // error here
        useFetchBanners(loadBrowserSearchParams);

    }, [router]);

    useEffect(() => {
        init();
    }, [init, router]);

...

It seems like i can't call my useFetchBanners inside of the useCallback.

Answer 1

I think your hook is already written correctly, you just need to use it differently. Call it in the body of your component, and it returns a function to you, and then you can call that function later.

// bannersPage.tsx
const fetchBanners = useFetchBanners();

const init = useCallback(async () => {
  if (router.isReady === false) {
    return;
  }
  let loadBrowserSearchParams = null;
  if (!_.isEmpty(router.query)) {
    loadBrowserSearchParams = {
       ...
    };
  }

  fetchBanners(loadBrowserSearchParams);
}, [router]);

useEffect(() => {
  init();
}, [init, router]);

PS, if the init function is only needed in the effect, you can move it inside the effect:

const fetchBanners = useFetchBanners();
useEffect(() => {
  if (router.isReady === false) {
    return;
  }
  let loadBrowserSearchParams = null;
  if (!_.isEmpty(router.query)) {
    loadBrowserSearchParams = {
       ...
    };
  }

  fetchBanners(loadBrowserSearchParams);
}, [router]);