使用react query和UseQueryResult输入错误
使用react query和UseQueryResult输入错误
提问于 2022-09-27 17:30:13
我在我的TS项目中使用了react query：
useOrderItemsForCardsInList.ts：
import { getToken } from '../../tokens/getToken';
import { basePath } from '../../config/basePath';
import { getTokenAuthHeaders } from '../../functions/sharedHeaders';
import { useQuery } from 'react-query';
async function getOrderItemsForCardsInList(listID: string) {
const token = await getToken();
const response = await fetch(`${basePath}/lists/${listID}/order_items/`, {
method: 'GET',
headers: getTokenAuthHeaders(token)
});
return response.json();
}
export default function useOrderItemsForCardsInList(listID: string) {
if (listID != null) {
return useQuery(['list', listID], () => {
return getOrderItemsForCardsInList(listID);
});
}
}我在这里使用我的查询结果：
import { useCardsForList } from '../../hooks/Cards/useCardsForList';
import useOrderItemsForCardsInList from '../../hooks/Lists/useOrderItemsForCardsInList';
import usePaginateCardsInList from '../../hooks/Cards/usePaginateCardsInList';
export default function CardsListFetch({ listID }: { listID: string }) {
const { isLoading, isError, error, data } = useCardsForList(listID);
const { orderItems } = useOrderItemsForCardsInList(listID);
const pagesArray = usePaginateCardsInList(orderItems, data);
return (
...
);
}但是，在我的const { orderItems } = useOrderItemsForCardsInList(listID);行中，我得到了以下错误：
Property 'orderItems' does not exist on type 'UseQueryResult<any, unknown> | undefined'.
我怎么解决这个问题？我真的不知道如何使用我对类型记录的查询结果，任何帮助都是非常感谢的
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-09-27 17:46:18
在您发现数据的地方需要使用的useQuery上的属性称为data，因此它应该是：
const { data } = useOrderItemsForCardsInList(listID);如果该data有一个名为orderItems的属性，您可以从那里访问它。
但是，我在您的代码中看到了两件事：
- useQuery的条件钩子调用(在反应中是禁止的)
- 您的queryFn返回
any，因为fetch是非类型化的，所以即使您使用的是TypeScript，也不会得到任何类型安全性。
Stack Overflow用户
发布于 2022-10-25 16:45:07
如果您使用Reactivewithreact-query，我建议您安装这个名为：react-query的devDependency当使用VS代码或任何其他智能文本编辑器将有帮助，因为它将帮助您键入建议。
npm i --save-dev @types/react-query
然后转到您的代码并修复以下几个问题：
- 从
useOrderItemsForCardsInList()中删除条件。不要在循环、条件或嵌套函数中调用React。见反应钩规则。 - 导入
UseCategoryResult并为返回对象定义接口。您可以称它为OrderItemsResult或类似的。在order对象的字段中添加OrderType类型，或者暂时只使用orderItems: any。 - 将返回类型
UseQueryResult<OrderItemsResult>添加到useOrderItemsForCardsInList()函数中。 - 修正
getOrderItemsForCardsInList()的返回值，它不应该是response.json()，因为那将是Promise，而不是实际数据。相反，请使用await response.json()。 - 因此，您的函数
useOrderItemsForCardsInList()将返回具有isLoading、error和data等属性的UseQueryResult。在第二个代码段中，您已经在一个地方使用了data，因此将数据重命名为orderData，并确保将默认的orderItems定义为空数组以避免出现问题：data: orderData = {orderItems: []}
useOrderItemsForCardsInList.ts：
import { getToken } from '../../tokens/getToken';
import { basePath } from '../../config/basePath';
import { getTokenAuthHeaders } from '../../functions/sharedHeaders';
import { useQuery, UseCategoryResult } from 'react-query';
type OrderType = {
id: string;
name: string;
// whatever fields you have.
}
interface OrderItemsResult {
orderItems: OrderType[],
}
async function getOrderItemsForCardsInList(listID: string) {
const token = await getToken();
const response = await fetch(`${basePath}/lists/${listID}/order_items/`, {
method: 'GET',
headers: getTokenAuthHeaders(token)
});
const data = await response.json();
return data;
}
export default function useOrderItemsForCardsInList(listID: string): UseQueryResult<OrderItemsResult> {
return useQuery(['list', listID], () => {
return getOrderItemsForCardsInList(listID);
});
}使用您的查询结果：
import { useCardsForList } from '../../hooks/Cards/useCardsForList';
import useOrderItemsForCardsInList from '../../hooks/Lists/useOrderItemsForCardsInList';
import usePaginateCardsInList from '../../hooks/Cards/usePaginateCardsInList';
export default function CardsListFetch({ listID }: { listID: string }) {
const { isLoading, isError, error, data } = useCardsForList(listID);
const { data: orderData = { orderItems: []}} = useOrderItemsForCardsInList(listID);
const pagesArray = usePaginateCardsInList(orderItems, data);
return (
...
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73871632
复制相关文章
相似问题
腾讯云开发者
