Реагировать на крючки с асинхронной выборкой

Question

Я новичок в перехватах React, но я пытаюсь использовать useEffect с useCallback, но получаю пресловутую ошибку React Hook "useList" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks.

Этот файл содержит makeRequest:

function useConnections = () => {
    const makeRequest = React.useCallback(async (props) => {
        // Determine base url, determine headers here
        const response = fetch(url, options);

        return response;
    }

    return { makeRequest };
}

Этот файл мой useListProvider:

function useListProvider = () => {
    const { makeRequest } = useConnections();

    const useList = React.useCallback(async (props) => {
        // makerequest is just a wrapper for fetch with a bunch of needed headers.
        const response = await makeRequest(props);

        return { body: response.body };
    }

    return { useList };
}

Это обработанная страница:

function MainPage() {
    const [isBusy, setIsBusy] = React.useStore(false);
    const { useList } = useListProvider();

    React.useEffect(() => {
        if (!isBusy) { useList(); setIsBusy(false); } // ERROR HERE!
    }, [useList]);

    return (
        <React.Fragment>
            IsBusy: {isBusy}
        </React.Fragment>
    );
}

Возможно, я не получаю его, но ятолько хотят получить данные useList, когда государство говорит, что они не заняты. Однако, делая это таким образом, я получаю ошибку, указанную выше. Я понимаю, что не могу думать об этом так же, как классы Component, но как бы вы подходили к одиночному или множественному рендеру из обратного вызова?

Я не совсем уверен, что здесь происходит, потому что я делаючто-то похожее в useConnections и т. д. и не получающее такую ​​же ошибку?

Answer 1

Правило lint для хуков предполагает, что вещи, начинающиеся с «использования», являются хуками. Таким образом, он думает, что useList является хуком и пытается применить к нему правила хуков . Но на самом деле это не хук, это просто обычная функция, поэтому вам просто нужно дать ему другое имя, и правило lint будет выполнено.

function useListProvider = () => {
    const { makeRequest } = useConnections();

    const callback = React.useCallback(async (props) => {
        const response = await makeRequest(props);

        return { body: response.body };
    }

    return { callback };
}

// elsewhere:

const { callback } = useListProvider();

React.useEffect(() => {
    if (!isBusy) { 
      callback(); 
      setIsBusy(false);
    }
}, [callback]);

Почему это не хук? Ну, ловушка - это либо одна из встроенных ловушек, либо функция, которая вызывает одну из встроенных ловушек. Ваш обратный вызов не соответствует этим критериям. Он был создан с помощью useCallback, но это просто означает, что это запомненная функция, а не ловушка.