我在參考以下文章時實作了它。 https://www.robinwieruch.de/react-hooks-fetch-data/
useFetch 代碼在這里。
export const useFetchData = () => {
// Data;
const [dataContents, setDataContents] = useState([]);
// URL;
const [url, setUrl] = useState('http://example.com');
// Loading Status
const [isLoading, setIsLoading] = useState(true);
// Error Status
const [isError, setIsError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsLoading(true);
setIsError(false);
try {
const { data } = await axios(url);
setDataContents(data.contents);
} catch (error) {
console.error('failed to fetch the data.');
setIsError(true);
}
setIsLoading(false);
};
fetchData();
}, [url]);
return [{ dataContents, isLoading, isError }, setUrl];
};
我將通過以下方式分配它。
const [{ dataContents, isLoading, isError }, doFetch]= useFetchData();
這是每種型別的回傳變數。
// dataContents is here:
type dataContents = {
variable01: string;
variable02: {
[key: string]: string;
};
variable03: {
[key: string]: string;
};
[key: string]: string | object;
};
// isLoading is boolean,
// isError is boolean.
我試過這個：
type fetchedData = [
{
dataContents: dataContents;
isLoading: boolean;
isErrof: boolean;
},
doFetch: (url: string) => void
];
// Error occurred.
const [{ dataContents, isLoading, isError }, doFetch]: fetchedData= useFetchData();
如何解決這個...請幫助。
uj5u.com熱心網友回復：
您可能應該顯式鍵入useFetchData函式的回傳值，因為它的推斷值將是any[].
export const useFetchData = (): fetchedData => {
// Data;
const [dataContents, setDataContents] = useState([]);
// URL;
const [url, setUrl] = useState('http://example.com');
// Loading Status
const [isLoading, setIsLoading] = useState(true);
// Error Status
const [isError, setIsError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsLoading(true);
setIsError(false);
try {
const { data } = await axios(url);
setDataContents(data.contents);
} catch (error) {
console.error('failed to fetch the data.');
setIsError(true);
}
setIsLoading(false);
};
fetchData();
}, [url]);
return [{ dataContents, isLoading, isError }, setUrl];
};
其次，你的fetchedData型別是一個元組，你只命名了第二個專案doFetch。元組應該有所有命名或未命名的專案，因此將其定義為：
type fetchedData = [
{
dataContents: QuestionData;
isLoading: boolean;
isError: boolean;
},
(url: string) => void
];
要么，
type fetchedData = [
obj: {
dataContents: QuestionData;
isLoading: boolean;
isError: boolean;
},
doFetch: (url: string) => void
];
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/442536.html
上一篇：打字稿和介面陣列未定義且不可分配