带有自定义 Axios 的通用自定义钩子

时间:2021-07-11 10:48:35

标签: typescript-generics

我有一个名为 fetchEpisodes 和 fetchLocations 的函数。它们都有类似的功能获取数据, setdata , setpage 等。

但 fetchEpisodes 使用名为 EpisodeGET 的函数来获取 service/dataFetch 下的数据,而 fetchLocations 使用同一目录下的 LocationGET。问题是我不能用通用类型的自定义钩子将这两个逻辑放在一个屋檐下。

CodeSandBox

这是我到目前为止尝试过但无法获得...data.results

interface FetchTypes<T> {
    Fetch: (page: number) => Promise<T>
    setData: React.Dispatch<React.SetStateAction<T[]>>
    setPage: React.Dispatch<React.SetStateAction<number | null>>
    page: number
    url:string
}

export default async function useFetch<T>({ Fetch, setData, setPage, page}: FetchTypes<T>) {
    try {
        const data = await Fetch(page)
        setData(prev => [...prev, ...data.results])
    } catch (error) {}
}

0 个答案:

没有答案