当我想显示错误消息时，其他组件在 React 中弹出错误

Question

我做了类似的东西，当我获取数据时，我拉Whosebug用户，当Whosebug用户不存在时，我想使用useState()

显示错误页面

在我的 Fetching API 中，我写的函数是

const [isError, setIsError] = useState<boolean>(false)
const [data, setData] = useState<any>([])

const fetchUser = async () => {
  await axios.get("URL")
  .then(userData => {
    if (userStats.data.items.length === 0) {
          setIsError(true)
          console.log("User Doesn't Exist")
       }
    else {setData(userStats.data.items[0])}
    //Up there I decalre my useState with that fetched API
  })
}

当我在输入字段中输入一些用户确实不存在的随机字母时，我检查了我的 useState 布尔值 如果是真的我想return我的ErrorPage组件如果它是假的SuccessProp Componenet

if(isError){
  return <ErrorPage />
}

return <Success username={data.userName}/>

我进入控制台日志 -> "User Doesn't Exist" 以及 React 错误

Cannot read properties of undefined (reading 'userName')

我知道 userName 不存在于数据中，但是当 isError 为真时，为什么我的 if 语句不忽略最后一个 return?

上面的代码显示的是我所做的逻辑

如果还有什么遗漏给我留言，我会编辑它

Answer 1

您的组件不知道 isError 已更改。它正在执行，就好像它仍然是错误的。

  useEffect(() => {
    if(isError){
       return <ErrorPage />
    }
  },[isError]);

当然你必须像这样从 react 导入 useEffect。

import React, { useState, useEffect } from 'react';

Answer 2

好的，我认为这里的问题是您正在调用一个不会“立即”提供结果的“异步”函数，所以当您的代码出现时：

if(isError){
  return <ErrorPage />
}
return <Success username={data.userName}/>

您的变量 isError 尚未设置。

所以基本上它加载 isError 作为默认值 (false)（如果你想尝试将它初始化为 true）。

有多种方法可以解决这个问题。例如你可以加载 a

<Loading>

异步功能正在进行时的组件。所以基本上在你的代码中：

const [isError, setIsError] = useState<boolean>(false)
const [isLoading, setIsLoading] = useState(true)
const [data, setData] = useState<any>([])

const fetchUser = async () => {
  await axios.get("URL")
  .then(userData => {
    if (userStats.data.items.length === 0) {
          setIsError(true)
          setIsLoading(false)
          console.log("User Doesn't Exist")
       }
    else 
    {
          setData(userStats.data.items[0])
          setIsLoading(false)
     }
    //Up there I decalre my useState with that fetched API
  })
}

和

if(isLoading)
{
   return <Loading/>
}
if(isError){
  return <ErrorPage />
}

return <Success username={data.userName}/>

或者您可以像其他答案中建议的那样使用：useEffect。但是我不确定 useEffect 会在 async 操作之后执行。你应该试试。

Answer 3

我在 if 语句中尝试过

if (userStats.data.items.length === 0)

并且不再弹出错误

当我想显示错误消息时，其他组件在 React 中弹出错误

While I want to Display Error message, other component pops up error in React

api

typescript

reactjs

axios

use-state