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

【问题标题】：While I want to Display Error message, other component pops up error in React当我想显示错误消息时，其他组件在 React 中弹出错误
【发布时间】：2021-11-09 19:36:09
【问题描述】：

我做了类似的事情，当我获取数据时，我拉取stackoverflow用户，当stackoverflow用户不存在时，我想使用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 布尔值 如果是真的我想返回我的ErrorPage 组件如果它是假的Success Prop Componenet

if(isError){
  return <ErrorPage />
}

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

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

无法读取未定义的属性（读取“用户名”）

我知道userName 不存在于数据中，但当isError 为真时，为什么我的 if 语句不忽略最后一次返回？

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

如果有其他遗漏的请评论我，我会编辑它

【问题讨论】：

标签： reactjs typescript api axios use-state

【解决方案1】：

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

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

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

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

【讨论】：

我试过了，但是我在控制台中没有出现错误，React 在页面上显示错误 TypeError: Cannot read properties of undefined (reading 'userName')

【解决方案2】：

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

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

您的变量 isError 尚未设置。

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

有多种方法可以解决这个问题。例如，您可以加载一个

<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 操作之后执行。你应该试试。

【讨论】：

我也试过那个版本，当我在输入框中输入一些奇怪的字母并点击回车时，它会弹出加载屏幕，然后还是同样的错误
您应该将“setIsLoading(false)”置于“else”条件下。编辑！ @callmenikk
是的，我已经在我的代码中提到过，我什至可以粘贴我的代码的某些部分以加深理解，也许我错过了代码中的某些内容
是的，我想我们还漏掉了一些东西！您可以粘贴您要修复的所有 Javascript 页面吗？谢谢！
我自己修复了bug，在if语句中我写了if userStats.data.items.length === []并且bug已经修复，那是关于if else语句的问题

【解决方案3】：

我在 if 语句中尝试过

if (userStats.data.items.length === [])

它不再弹出错误了

【讨论】：