reactjs - AxiosResponse 和 UseQueryResult 类型错误

Question

我在我的 typescript 项目中使用 React 查询。

export type CarouselData = {
  name: string;
  body: string;
  imgOne: string;
  imgTwo: string;
};

export const getCarouselData = async (): Promise<
  AxiosResponse<CarouselData[]>
> => {
  return await (
    await publicAPI.get('/carouselData')
  );
};

export const useGetCarouselData = (): UseQueryResult<
  Promise<AxiosResponse<CarouselData[]>>
> => {
  return useQuery('getCarouselData', getCarouselData);
};

在我的组件中，我按如下方式使用它。

type Item = {
    name: string,
    body: string,
    imgOne: string,
    imgTwo: string,
}

export const HomeCarousel: FC = () => {
    const {Root} = useStyles();

    const result = useGetCarouselData();
    
    console.log(result.data.data); //data.data is giving an error
    return (
        <Root>
            <Carousel<Item[]>>
                {result.data.data.map((item, index)=> {
                    return <CarouselItem key={index} name={item.name} body={item.body} imgOne={item.imgOne} imgTwo={item.imgTwo}/>
                })}
            </Carousel>
        </Root>
    )
}

现在，我收到一个错误 Property 'data' does not exist on type 'Promise<AxiosResponse<CarouselData[], any>>'.ts(2339)那不应该在那里？

我想知道为什么会这样或者如何解决这个问题。 :)

感谢任何帮助。

Answer 1

react-query 解开 Promise，因此您需要:UseQueryResult<AxiosResponse<CarouselData[]>>

或者，您可以只使用类型推断。省略类型，让编译器自行计算:)