我正在使用React Query with typescript来获取项目中的数据,并且尝试使用useQuery钩子返回的错误来显示描述错误的消息(如果存在的话),如下所示:
{isError && (error)? <p className=" text-[#ff0000] text-center font-semibold">{error?.response.data.message}</p> : null}
我遇到错误类型的问题:
我怎么能修复它,我找不到任何在互联网上,如果可能的话,任何人都可以解释如何处理不同的抛出错误与React查询,因为你可以抛出任何在JS/TS
3条答案
按热度按时间9jyewag01#
error
默认为类型unknown
,因为您的queryFn
可以抛出任何东西,这是一个javascript行为。throw 5
将为您提供number
作为您的错误类型。没有好的方法来Assert,所以unknown是最好的可能类型。这也是TypeScript从v4.4(useUnknownInCatchVariables)开始默认做的事情。确保您的应用按照您的意愿运行的最佳方法是在运行时缩小类型范围。
if (error instanceof Error)
可以实现这一点,您可以安全地访问error.message
。如果你使用的是
axios
,那么类型实际上是AxiosError
,axios有一个axios.isAxiosError(error)
帮助器来检查这个类型,并正确地缩小类型。另一种方法是为useQuery提供泛型:
但这是不好的,有几个原因:
1.实际上有四个泛型,而您只提供其中两个就可以删除一堆特性
1.没有人能保证你的错误一定是一个axios错误,例如,如果你使用
select
,一个运行时错误发生在那里(因为一些错误的逻辑),你的错误将是一个“正常的”Error
,而不是一个axios错误。唉,因为你可以在JS中抛出任何东西,unknown是最正确的类型。
我也会在我的博客中介绍更多细节:
https://tkdodo.eu/blog/react-query-and-type-script
6qftjkof2#
我遇到了与Typescribe和react-query相同的问题,相同的错误
Object is of type 'unknown'.
安装这个devDependency“@types/react-query”在某种程度上帮助了我。我正在使用VS代码编辑器,我认为这有助于类型建议。这可能会有帮助。
npm i --save-dev @types/react-query
mcdcgff03#
正如@TkDodo所指出的,您可以为
useQuery
提供泛型,但这是不值得的,因为您也将失去Type推断。但是,作为一种解决方法,我添加了
onError
回调函数,并输入它的error
参数。TypeScript会将该错误的类型推断为我所期望的useQuery
类型。注意,我对所有用来格式化和抛出自定义错误的请求都使用
Axios
请求和响应拦截器。例如...