redux Rtk查询类型脚本在显示错误时给出警告

fd3cxomn  于 2023-04-06  发布在  其他
关注(0)|答案(2)|浏览(139)

我正在使用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'.

这是它在代码编辑器上的外观:

5m1hhzi4

5m1hhzi41#

如你所见,有两种不同的类型:

  1. FetchBaseQueryError
  2. SerializedError
    SerializedError的返回类型是:
export interface SerializedError {
  name?: string
  message?: string
  stack?: string
  code?: string
}

正如您所看到的,其中没有data属性。
因此,如果你只想得到FetchBaseQueryError错误,你可以这样检查以确保:

if ('data' in error) {}

您可以在这里阅读更多:
RTK查询错误处理

wrrgggsh

wrrgggsh2#

问题

if ('data' in error) {}

基本上,上面的方法对于这种类型的响应错误很有效:

// the upper approach will work fine for this.
error: {
  data: "Error message here."
}

但是,当您遇到类似下面的错误响应时,您可能会遇到另一个警告Property 'error' does not exist on type '{}'.

// the approach is not working for this.
error: {
  data: {
    error: "Error message here."
  }
}

溶液:

首先,您可以使用useState添加错误状态,然后设置状态的typetype可以是any,也可以编写自定义type。只需将类型设置为可选。然后您可以将内部对象保存在状态中。然后您可以简单地将错误显示到UI中。下面是一个示例:

const [error, setError] = useState<any>(undefined);
const [login, { isLoading, error: resError }] = useLoginMutation();

useEffect(() => {
  if (resError && 'data' in resError) {
    setError(resError.data);
  }
}, [resError]);

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>
)

相关问题