我正在使用React Ts和Rtk查询。我试图在UI上显示API响应错误。它正在工作,但给我一个警告。它告诉我设置响应错误的错误类型。我如何为响应错误添加错误类型?或者有其他解决方案吗?这是我如何显示错误的。
const [login, { isLoading, isError, error }] = useLoginMutation();
return (
<div>
{isError && (
<div className="bg-neRed-200 text-neRed-900 font-medium py-1 px-2 text-sm rounded">
{error?.data?.error}
</div>
)}
</div>
)
基本上,它给了我这个错误:
Property 'data' does not exist on type 'FetchBaseQueryError | SerializedError'.
Property 'data' does not exist on type 'SerializedError'.
这是它在代码编辑器上的外观:
2条答案
按热度按时间5m1hhzi41#
如你所见,有两种不同的类型:
FetchBaseQueryError
SerializedError
SerializedError
的返回类型是:正如您所看到的,其中没有
data
属性。因此,如果你只想得到
FetchBaseQueryError
错误,你可以这样检查以确保:您可以在这里阅读更多:
RTK查询错误处理
wrrgggsh2#
问题
基本上,上面的方法对于这种类型的响应错误很有效:
但是,当您遇到类似下面的错误响应时,您可能会遇到另一个警告
Property 'error' does not exist on type '{}'.
溶液:
首先,您可以使用
useState
添加错误状态,然后设置状态的type
。type
可以是any
,也可以编写自定义type
。只需将类型设置为可选。然后您可以将内部对象保存在状态中。然后您可以简单地将错误显示到UI中。下面是一个示例: