使用函数作为反作用钩子

Question

我想使用一个函数作为react hook来包装到API的fetch请求。

我当前的钩子：

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调用(。如果除了反作用钩子之外，我还有其他方法可以做这件事，我想知道。

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所做的操作