我在我的打字稿專案中使用反應查詢。
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)不應該出現的錯誤？
我想知道為什么會發生這種情況或如何解決這個問題。:)
任何幫助表示贊賞。
uj5u.com熱心網友回復：
react-query 解開 Promise，所以你想要： UseQueryResult<AxiosResponse<CarouselData[]>>
或者，您可以只使用型別推斷。省略型別，讓編譯器弄清楚:)
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/419527.html
標籤：