Использовать функцию как отреагировать? - PullRequest
Новая
       16

Использовать функцию как отреагировать?

0 голосов
/ 19 февраля 2020

Я хотел использовать функцию в качестве обработчика реакции для переноса запросов на выборку к API.

Мой текущий хук: 

export function useAPI(url, options={}) {
    const [auth, setAuth] = useGlobal('auth');
    const [call, setCall] = useState(undefined);

    const apiFetch = async () => {
        const res = await fetch(url, {
            ...options,
        });
        if (!res.ok)
            throw await res.json();
        return await res.json();
    };

    function fetchFunction() {
        fetch(url, {
            ...options,
        });
    }

    useEffect(() => {
        // Only set function if undefined, to prevent setting unnecessarily
        if (call === undefined) {
            setCall(fetchFunction);
            //setCall(apiFetch);
        }

    }, [auth]);

    return call
}

Таким образом, в функции реагирования я мог бы сделать следующее ... 

export default function LayoutDash(props) {
    const fetchData = useAPI('/api/groups/mine/'); // should return a function

    useEffect(() => {
        fetchData(); // call API on mount
    }, []);

    render(...stuff);
}

Но, похоже, реакция не не в состоянии использовать функции в таких хуках. Если я установлю call на fetchFunction, он вернет undefined. Если я установлю его на apiFetch, он выполнит и вернет обещание вместо функции, которую я могу вызвать, когда захочу в другом компоненте.

Изначально я выбрал реакционные хуки, потому что я не могу использовать useGlobal внешние реактивные компоненты / крючки. И мне нужно иметь доступ к глобальной переменной reactn auth, чтобы проверить, не истек ли токен доступа.

Так что было бы лучшим способом go по этому поводу? Конечной целью является возможность передать (url, options) функции, которая будет оберткой для запроса на выборку. (Он проверяет, истек ли auth.access, и если да, сначала получает новый токен доступа, затем выполняет вызов API, в противном случае он просто вызывает API). Если бы у меня был другой способ go об этом, кроме как реагировать на хуки, я бы хотел знать.

1 Ответ

0 голосов
/ 19 февраля 2020

Вместо помещения вашей функции в useState рассмотрите возможность использования useCallback. Ваш код будет выглядеть примерно так: 

export function useAPI(url, options={}) {
    const [auth, setAuth] = useGlobal('auth');

    function fetchFunction() {
        fetch(url, {
            ...options,
        });
    }

    const call = useCallback(fetchFunction, [auth]);


    const apiFetch = async () => {
        const res = await fetch(url, {
            ...options,
        });
        if (!res.ok)
            throw await res.json();
        return await res.json();
    };

    return call
}

Возвращаемая функция воссоздается всякий раз, когда изменяется auth, поэтому несколько имитирует то, что вы пытались сделать с useEffect

...