响应泛型useFetch状态

Question

我正在尝试编写一个定制钩子useFetch，它对不同的数据提出许多请求。

问题是我不能正确地键入我的约会对象，我有这样的状态。

interface IState<T> {
   data:  T | T[]
   loading: boolean,
   error: boolean,
}

初始状态

const initialState = {
   data: [],
   loading: false,
   error: false,
}

useEffect

useEffect(() => {
        setData((prevState) => ({...prevState, loading: true}));
        axios.get(url)
            .then(response => response.data.results ? response.data.results as T[] : response.data as T)
            .then((data) => (setData((prevState) => ({...prevState, loading: false, data}))))
            .catch(e => {
                setData((prevState) => ({...prevState, error: true}));
                if (e instanceof Error) console.log(e.message);
            })
}, []);

当我得到response.data.results时，我有一个对象数组，当我有response.data时，我只有一个对象。我正试着回到正确的类型。

我把我的函数叫做这个useFetch，我有类似于这个MovieType \ MovieType[]的结果。我不需要TypeGuard，我只需要一种正确的类型。

如果你看到任何问题，请告诉我。

非常感谢!

Answer 1

这个例子在联合时不可能有一个单数类型。

泛型函数不知道它将以T[]还是T对象输出哪个函数，因为您是如何定义IState的。

当您从钩子中读取.data时，您只需检查它是否是一个数组。

Sana Mumtaz说，拥有单一输出类型的唯一方法是删除联合T[]，并像Sana Mumtaz那样简单地转换。

interface IState<T> {
   data:  T
   loading: boolean,
   error: boolean,
}

const useFetch = <T>(): IState<T> => {
   // ...
   response => (response.data.results ? response.data.results : response.data) as T
}

useFetch<MovieType[]>();

Answer 2

Axios.get是一个泛型函数，所以您可以利用它。

试一试

useEffect(() => {
    setData((prevState) => ({ ...prevState, loading: true }));
    axios.get<{ results: T[] } | T>(url)
        .then(({ data }) => "results" in data ? data.results : data)
        .then(data => {
            setData(prevState => ({ ...prevState, loading: false, data }))
        })
        .catch(e => {
            setData((prevState) => ({ ...prevState, error: true }));
            if (e instanceof Error) console.log(e.message);
        })
}, []);

参见操场示例这里