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

【问题标题】：Cannot read properties of undefined (reading 'name'): ReactJs无法读取未定义的属性（读取“名称”）：ReactJs
【发布时间】：2021-12-06 01:36:15
【问题描述】：

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

我的数据对象看起来像：

{_id：'616bf82d16a2951e53f10da4'，姓名：'abd'，电子邮件：'q@gmail.com'，电话：'1234567890'，工作：'singer'，……}

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

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

电子邮件：“q@gmail.com”

名称：“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>
    )
}

【问题讨论】：

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

标签： javascript reactjs

【解决方案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] 等。然后分别设置。