接收接口作为参数

奥塔维奥·邦德

我正在学习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'类型

我想念什么?

提前致谢!

拉梅什·雷迪(Ramesh Reddy)

该错误说明了一切,data直到response.data用于更新state(data为止才能定义该错误

因此,尝试像这样更改响应类型:

interface ResponseProps<T> {
    data: T | undefined,
    error: boolean,
    loading: boolean
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章