Вызовите хук из другого хука в ответ

Question

Я новичок в реакции и пытаюсь облегчить развитие.

У меня есть этот пользовательский хук useApi.

import {useState} from "react";
import {PetsApiFactory} from "petstore-axios-api"
import {useKeycloak} from "@react-keycloak/web";

const petsApi = new PetsApiFactory({}, `${process.env.REACT_APP_BASE_URL}`);
export const useApi = () => {

    const [isLoading, setIsLoading] = useState(false);
    const {keycloak} = useKeycloak();

    const createPets = (requestData) => {
        setIsLoading(true);
        return petsApi.createPets(requestData, {
            headers: {
                Authorization: `Bearer ${keycloak.token}`
            }
        }).finally(() => setIsLoading(false));
    };

    const listPets = (limit = undefined) => {
        setIsLoading(false);
        return petsApi.listPets(limit, {
            headers: {
                Authorization: `Bearer ${keycloak.token}`
            }
        }).finally(() => setIsLoading(false));
    };

    const showPetById = (petId) => {
        setIsLoading(true);
        return petsApi.showPetById(petId, {
            headers: {
                Authorization: `Bearer ${keycloak.token}`
            }
        }).finally(() => setIsLoading(false));
    };

    return {
        createPets,
        listPets,
        showPetById,
        isLoading
    }
};

Я бы хотел вызвать его из другого компонента, как в этом фрагменте.

useEffect(() => {
    listPets()
        .then(result => setPetsData(result.data))
        .catch(console.log)
}, []);

Как бы то ни было, реакция говорит мне, что мне не хватает зависимости от listPets
React Hook useEffect has a missing dependency: 'listPets'. Either include it or remove the dependency array

Я пытался включить listPets в качестве зависимости, но это приводит к повторяющемуся вызову внутреннего сервиса , Как лучше всего переписать вызов на useApi hook?

Спасибо

Answer 1

Изменение использования компонентаЭффект:

useEffect(() => {
   listPets()
    .then(result => setPetsData(result.data))
    .catch(console.log)
}, [listPets]);

А затем попробуйте обернуть функцию listPets с помощью ловушки useCallBack следующим образом:

const showPetById = useCallback((petId) => {
    setIsLoading(true);
    return petsApi.showPetById(petId, {
        headers: {
            Authorization: `Bearer ${keycloak.token}`
        }
    }).finally(() => setIsLoading(false));
},[petsApi]);

Answer 2

вы забыли добавить listPets в использованиеEffect

useEffect(() => {
listPets()
    .then(result => setPetsData(result.data))
    .catch(console.log)
}, [listPets]);