详细介绍：React Hooks小技巧-防止async函数抖动触发

思路

接收一个async函数，函数触发后进入loading状态，在函数执行resolve后结束loading，期间不再触发

import { useCallback, useState } from 'react';
function useAsyncFn(
fn: (...args: any[]) => Promise,
): [(...args: any[]) => Promise, boolean] {
const [loading, setLoading] = useState(false);
const resFn = useCallback(
async (...args: any[]) => {
if (!fn) {
return Promise.resolve();
}
if (loading) {
return;
}
setLoading(true);
try {
const res = await fn(...args);
setLoading(false);
return res;
} catch (e) {
setLoading(false);
throw e;
}
},
[fn, loading],
);
return [resFn, loading];
}
export default useAsyncFn;