Reactjs 如何调用在typescript中使用钩子的函数？

我正在尝试将typescript（我当然是新手）添加到我的react项目中。我编写了一个钩子，它从我编写的api中获取数据。我想添加类型，但我想typescript不会编译，因为在渲染开始时状态未定义。我猜。问题在于在VictoryPie组件内调用formatData函数。我得到的错误是：

TypeScript error: Argument of type 'boolean | never[]' is not assignable to parameter of type 'Data[]'.
  Type 'false' is not assignable to type 'Data[]'.  TS2345

    26 |         <VictoryPie
    27 |           colorScale={['tomato', 'orange', 'gold', 'cyan', 'navy']}
  > 28 |           data={formatData(graphData)}
       |                            ^
    29 |           x="description"
    30 |           y="amount"
    31 |         />

---

这里有两个问题

您需要声明钩子返回元组。现在，typescript假设您返回数据数组并以任意顺序加载

此外，您还需要声明您希望作为获取结果的结果类型

你的钩子应该看起来像

function useFetch<ExpectedResult>(url: string, initialData: ExpectedResult): [ExpectedResult, boolean] {
  const [data, setData] = useState(initialData);
  const [loading, setLoading] = useState(true);

  async function fetchUrl() {
    const response = await axios(url);
    console.log(response);
    setData(response.data)
    setLoading(false);
  }
  useEffect(() => {
    fetchUrl();
  }, [url]); // <<-- when url is changed you propably want to re-fetch
  return [data, loading];
}

函数useFetch（url:string，initialData:ExpectedResult）：[ExpectedResult，boolean]{
const[data，setData]=使用状态（initialData）；
const[loading，setLoading]=useState（true）；
异步函数fetchUrl（）{
常量响应=等待axios（url）；
控制台日志（响应）；
setData（response.data）
设置加载（假）；
}
useffect（（）=>{
fetchUrl（）；
}，[url]）；//我认为您应该在自定义cook中返回一个对象而不是数组，它将是
返回{data，loading}；
，加载类型将是
布尔型
，数据类型将是
数据[]
我更改了，现在我得到了类型脚本错误：type'{data:never[]；loading:boolean；}'不是数组类型。TS2461change
useState（[]）
by
useState（[]作为数据[]）
相同错误：类型脚本错误：类型“{Data:any[]；load:boolean；}”不是数组类型。TS2461使用[Data，loading]以及{Data，loading}尝试过。当然，在您的组件中，您应该替换
const[graphData，loading]=useFetch（'/api/Kamil'）；
by
const{data:graphData，loading}=useFetch（'/api/Kamil'）；
这是正确的。为了使它正常工作，我必须更改
javascript类型DataFromServer=data[]；//在日期[]之前。
需要更多关于这方面的阅读，文档是不够的。谢谢
import {useState, useEffect} from 'react';
import axios from 'axios';

function useFetch(url: string) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  async function fetchUrl() {
    const response = await axios(url);
    console.log(response);
    setData(response.data)
    setLoading(false);
  }
  useEffect(() => {
    fetchUrl();
  }, []);
  return [data, loading];
}
export { useFetch };

function useFetch<ExpectedResult>(url: string, initialData: ExpectedResult): [ExpectedResult, boolean] {
  const [data, setData] = useState(initialData);
  const [loading, setLoading] = useState(true);

  async function fetchUrl() {
    const response = await axios(url);
    console.log(response);
    setData(response.data)
    setLoading(false);
  }
  useEffect(() => {
    fetchUrl();
  }, [url]); // <<-- when url is changed you propably want to re-fetch
  return [data, loading];
}

type DataFromServer = Date[];

const [data, isLoading] = useFetch<DataFromServer>('/api/Kamil', []);