无法读取未定义的属性（读取“名称”）：ReactJs

Posted 2023-03-29

【中文标题】无法读取未定义的属性（读取“名称”）：ReactJs

【英文标题】：Cannot read properties of undefined (reading 'name'): ReactJs

【发布时间】：2021-12-06 01:36:15

【问题描述】：

当我尝试记录时，我的控制台中有数据，但我无法使用它。

我的数据对象看起来像：

_id：'616bf82d16a2951e53f10da4'，姓名：'abd'，电子邮件：'[e-mail]'，电话：'1234567890'，工作：'singer'，……

访问令牌：“eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxNmJmODJkMTZhMjk1MWU1M2YxMGRhNCImlhdCI6MTYzNDYyMDk3MiwiZXhwIjoxNjM1MDUyOTcyfQ.b9NZB-ogrdu_SulT1xJ8h62j”

cpassword: "$2a$12$BZ17rY63qrq.Fw9wC29A.eabcuAHSY0mXfxSvcpxOFGfUeW4NUkMO"

电子邮件：“[e-mail]”

名称：“abd”

电话：“1234567890”

代币：(3) […, …, …]

作品：“歌手”

__v: 3

_id：“616bf82d16a2951e53f10da4”

[[原型]]：对象

import "./about.css"
import useHistory from "react-router-dom"


export default function About() 
    const history=useHistory();
    const [userData,setUserData]=useState();
    const callAboutPage=async()=>
        try 
            const res=await fetch("/about",
                method:"GET",
                headers:
                    Accept:"application/json",
                    "Content-Type":"application/json"
                ,
                credentials:"include"
            )
            const data=await res.json();
            console.log(data);
            setUserData(data);

            if(!res.status===200)
               const error=new Error (res.error)
               throw error
            
            
         catch (error) 
            console.log(error)
            history.push("/login")
        
    
    
  useEffect(() => 
     callAboutPage();
  , [])

    return (
        <div className="abt-body">
            <div className=" d-flex justify-content-center align-items-center about">
                
                Name:userData.name
                <br />
                Id:userData._id
                <br />
                Email:userData.email
                <br />
                Phone:userData.phone
                <br />
                Work:userData.work
             
                

                

            </div>
           

                <div class="card-footer text-muted d-flex justify-content-center align-items-center">
    Designed and Developed by : Harsh Raj Ambastha
  </div>
        </div>
    )

【问题讨论】：

在一个可以被数千人阅读的问题中包含个人信息是不好的。

【参考方案1】：

您可以尝试使用 javascript 可选链：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

尝试将运算符添加到您的每个字段：

userData?.name
userData?._id

等等

【参考方案2】：

这是因为您将初始值设置为空，这将被解释为原始值。因此，当它最初呈现时，它发现您正在尝试访问不存在的原始值的属性。将初始值作为空对象，它将不再在这里抛出错误。 useState()

【讨论】：

谢谢，它解决了那个错误，但我仍然无法在我的 dom 上渲染它。我试图找出为什么会这样，在设置数据后我试图在控制台上记录 userData.name 它仍然显示未定义。有什么解决方案吗？在此先感谢:)

你在哪里使用 console.log(userData.name)。如果您可以在代码沙箱中进行设置，请提供链接。我可以看看

我所做的更改：const [userData,setUserData]=useState( _id: "", name: "", email: "", phone: "", work: "");常量数据=等待 res.json(); setUserData(data);[HERE I DID LOG]console.log(userData.name)

useState() 就像一个等待操作。它不会立即更新您的状态。所以这是检查console.log（data）中是否有价值的一件事。如果您在数据中具有价值，那么您应该尝试使用单独的值而不是对象中的 useState。比如 const [name,setName], [email,setEmail] 等。然后分别设置。