如何获取错误.数据在RTK查询使用typescript?

Question

如果我将error输出到控制台，我得到:

{
status: 401,
data: "Invalid password"
}

如果我尝试输出error.data到控制台，我得到一个错误:

"data"属性中不存在"FetchBaseQueryError | SerializedError"类型。"data"属性是SerializedError"type.ts (2339)

完整代码:

const [login, { data, error }] = useLoginMutation()
const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (event) => {
event.preventDefault()
if (credential.user_email.trim() !== '' && credential.user_password.trim() !== '') {
await login(credential)
}
}
useEffect(() => {
if (data !== undefined) {
localStorage.token = data.token
}
}, [data])
useEffect(() => {
if (error !== undefined) {
console.log(error.data)
}
}, [error])

请告诉我如何正确使用打字稿。

Answer 1

使用类型保护函数-在类型安全错误处理中有更多说明

function isFetchBaseQueryError(
error: unknown
): error is FetchBaseQueryError {
return typeof error === 'object' && error != null && 'status' in error
}

useEffect(() => {
if (isFetchBaseQueryError(error)) {
console.log(error.data)
}
}, [error])

如果你不需要这么做你也可以直接输入

useEffect(() => {
if (error && 'status' in error) {
console.log(error.data)
}
}, [error])