我正在学习Typescript,正在创建一个自定义的React钩子,以从api中获取数据:
import { useState, useEffect } from 'react';
import api from '../services/api';
interface RequestProps {
url: string;
initialLoading: boolean;
}
interface ResponseProps<T> {
data: T,
error: boolean,
loading: boolean
}
export const useApiRequest = <T>({ url, initialLoading }: RequestProps): ResponseProps<T> => {
// Response state
const [data, setData] = useState<T>();
const [error, setError] = useState(false);
const [loading, setLoading] = useState(initialLoading);
useEffect(() => {
const fetchApi = async () => {
try {
setLoading(true);
// Fetch data from REST API
const response = await api.get<T>(url);
setLoading(false);
setData(response.data);
} catch (e) {
setError(true);
}
};
// Call async function
fetchApi();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [url]);
return {
data,
loading,
error,
};
};
我要做的是根据T
接口的不同响应,将接口作为参数接收并分配给参数data
,因为接口data
将有所不同url
。因此,每当我调用此钩子时,我都想传递的自定义接口data
,例如:
const {data, loading, error} = useApiRequest<MyCustomInterfaceForData>({url: 'https://apiurl', initialLoading: true})
问题是Typescriptdata
在return语句中给我一个错误:
TS2322:类型'T | 未定义”不能分配给类型“ T”。可以用与“ T | T”无关的任意类型实例化“ T”。未定义”。类型“未定义”不能分配给类型“ T”。可以使用与“ undefined”无关的任意类型实例化“ T”。useApiRequest.ts(10,5):预期的类型来自属性'data',该属性在此处声明为'ResponseProps'类型
我想念什么?
提前致谢!
该错误说明了一切,data
直到response.data
用于更新state(data
)为止,才能定义该错误。
因此,尝试像这样更改响应类型:
interface ResponseProps<T> {
data: T | undefined,
error: boolean,
loading: boolean
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句