使用函数作为反应钩子？

Question

我想使用一个函数作为一个反应钩子来将获取请求包装到一个 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);
}

但似乎 react 不能在这样的钩子中使用函数。如果我将call 设置为fetchFunction，它将返回undefined。如果我将它设置为apiFetch，它会执行并返回一个promise，而不是我想在另一个组件中调用时可以调用的函数。

我最初选择了 react 钩子，因为我不能在 react 组件/钩子之外使用 useGlobal。而且我需要访问reactn 全局变量auth 来检查访问令牌是否已过期。

那么最好的方法是什么？最终目标是能够将(url, options) 传递给将成为获取请求的包装器的函数。 （它会检查auth.access 是否过期，如果是，则首先获取新的访问令牌，然后进行 api 调用，否则只进行 API 调用）。如果除了 react hooks 之外我还有其他方法可以解决这个问题，我想知道。

Answer 1

不要将您的函数放入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 执行的操作