我一直在學習自定義鉤子，并希望在整個應用程式中重復的代碼塊上實作它們。重復塊是從 API 獲取資料的 try-catch 塊。
鉤子：
const useFetch = (url: string, method: string) => {
const [data, setData] = useState(null);
const [errorMsg, setErrorMsg] = useState('');
useEffect(() => {
(async () => {
try {
const response = await api({ url, method });
setData(response.data);
} catch (error) {
error instanceof Error && setErrorMsg(error.message);
}
})();
}, [url, method]);
return { data, errorMsg };
};
export default useFetch;
這是實作鉤子之前來自組件的代碼：
const Productivity = () => {
const [productivity, setProductivity] = useState<IUser[]>([]);
const [errorMsg, setErrorMsg] = useState<string>('');
useEffect(() => {
(async () => {
try {
const response = await api({ url: '/api/productivity', method: 'GET' });
response.users && setProductivity(response.users);
} catch (error) {
error instanceof Error && setErrorMsg(error.message);
}
})();
}, []);
return <div>{productivity.length > 0 ? <ProductivityTable productivity={productivity} /> : <AlertMessage errorMsg={errorMsg} />}</div>;
};
同一組件的更新版本：
const Productivity = () => {
const { data: productivity, errorMsg } = useFetch('/users', 'GET');
return (
<div>
{errorMsg && <AlertMessage errorMsg={errorMsg} />}
{productivity && <ProductivityTable productivity={productivity} />}
</div>
);
};
如果我運行該應用程式，一切都會順利進行，但我注意到 {productivity} 的型別是“從不”。這意味著什么？如何將生產力型別設定為 IUser 陣列？我需要嗎？我不確定這里的最佳做法是什么。
uj5u.com熱心網友回復：
將您的鉤子更改為通用函式，并帶有回傳資料型別的引數：
function useFetch<T>(url: string, method: string) {
const [data, setData] = useState<T | null>(null);
// the rest stays the same
};
用法：
const { data: productivity, errorMsg } = useFetch<IUser[]>('/users', 'GET');
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/513149.html
標籤：反应打字稿反应钩子
上一篇：AgileBoot - 基于SpringBoot + Vue3的前后端快速開發腳手架
下一篇：如何對唯一鍵值進行排序和操作