我有以下 http Hook :
export const useHttp = <T,>(initUrl: string, initData: T) => {
const [url, setUrl] = useState(initUrl);
const [state, dispatch] = useReducer(fetchReducer, {
isLoading: false,
error: '',
data: initData
});
useEffect(() => {
let cancelRequest = false;
const fetchData = async (cancelRequest: boolean = false) => {
if (!url) return;
dispatch({ type: 'API_REQUEST'});
try {
const responsePromise: AxiosPromise<T> = axios(url);
const response = await responsePromise;
if (cancelRequest) return;
dispatch({ type: 'API_SUCCESS', payload: response.data });
} catch (e) {
console.log("Got error", e);
dispatch({ type: 'API_ERROR', payload: e.message });
}
};
fetchData(cancelRequest);
return () => {
cancelRequest = true;
}
}, [url]);
const executeFetch = (url: string) => {
setUrl(url);
};
return { ...state, executeFetch}
};
reducer :
const fetchReducer = <T,>(state: IState<T>, action: TAction<T>): IState<T> => {
switch (action.type) {
case 'API_REQUEST':
return {
...state,
isLoading: true
};
case 'API_SUCCESS':
return {
...state,
data: action.payload,
isLoading: false,
error: ''
};
case 'API_ERROR':
console.error(`Triggered: ${API_ERROR}, message: ${action.payload}`);
return {
...state,
error: action.payload,
isLoading: false,
};
default:
throw Error('Invalid action');
}
};
行动:
export interface IApiSuccess<T> {
type: types.ApiSuccess,
payload: T;
}
export type TAction<T> = IApiRequest | IApiSuccess<T> | IApiError;
像这样使用:
const { data, error, isLoading, executeFetch } = useHttp<IArticle[]>('news', []);
return (
<>
<div className={classes.articleListHeader}>
<h1>Article List</h1>
<small className={classes.headerSubtitle}>{data.length} Articles</small>
</div>
<ul>
{data.map(article => <Article article={article}/>)}
</ul>
</>
)
我的 TS 对我大喊大叫,因为我正在使用 data
变量:对象的类型为“未知”。 TS2571
我确实指定了 useHttp 的类型,即 IArtlce[]。 知道我错过了什么吗?
更新: 我尝试为我的 reducer 添加返回类型:
interface HttpReducer<T> extends IState<T> {
executeFetch: (url: string) => void
}
export const useHttp = <T,>(initUrl: string, initData: T): HttpReducer<T> => {
但我得到:
Type '{ executeFetch: (url: string) => void; error: string; isLoading: boolean; data: unknown; }' is not assignable to type 'HttpReducer<T>'.
最佳答案
我能够reproduce your error 。您期待useReducer
hook 将能够根据初始状态的类型推断出状态类型,但它只是推断 IState<unknown>
.
useReducer
的类型are defined这样泛型参数就是 reducer 的类型。状态的类型是从具有 ReducerState
的 reducer 推断出来的。实用类型。它不需要通用的 reducer ,并且不能很好地与它配合。
T
之间没有关系钩子(Hook)和 T
是 reducer 而不是状态。 fetchReducer
是一个通用函数,这意味着它可以采用任何 IState
并返回IState
属于同一类型。我们可以使用这个函数来处理IState<T>
我们的钩子(Hook),但为了推断状态的类型,我们需要说我们的函数将仅接受并返回 IState<T>
.
您需要为您设置通用useReducer
对此:
const [state, dispatch] = useReducer<(state: IState<T>, action: TAction<T>) => IState<T>>( ...
从表面上看,这看起来与现在推断的非常相似,即:
const [state, dispatch] = useReducer<<T,>(state: IState<T>, action: TAction<T>) => IState<T>>(...
但差异至关重要。当前描述的是通用函数,而修复描述的是仅采用 T
一种类型的函数。 -- useHttp
的钩。这是误导,因为您正在使用 T
对彼此而言。如果我们重命名,也许更容易看出。
我们有一个通用函数:
export const useHttp = <Data,>(initUrl: string, initData: Data) => {
const [url, setUrl] = useState(initUrl);
const [state, dispatch] = useReducer<<T,>(state: IState<T>, action: TAction<T>) => IState<T>>(fetchReducer, {
我们需要该函数的特定用例:
export const useHttp = <Data,>(initUrl: string, initData: Data) => {
const [url, setUrl] = useState(initUrl);
const [state, dispatch] = useReducer<(state: IState<Data>, action: TAction<Data>) => IState<Data>>(fetchReducer, {
当我们知道我们的reducer状态类型是IState<Data>
时,那么我们知道 data
的类型是 Data
.
现在调用useHttp<IArticle[]>()
给你一个data
类型为 IArticle[]
的变量.
关于reactjs - 通用 Typescript 类型 + React hook,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66730339/