无法读取未定义的属性(读取"名称")：ReactJs

Question

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

我的数据对象如下:

{_id: '616bf82d16a2951e53f10da4'，姓名:'abd'，电子邮件:'[e-mail]'，电话:'1234567890'，工作:'歌手'，…}

accessToken:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxNmJmODJkMTZhMjk1MWU1M2YxMGRhNCIsImlhdCI6MTYzNDYyMDk3MiwiZXhwIjoxNjM1MDUyOTcyfQ.b9NZB-ogrdu_SulT1xJ8h62aHdyAo2jzTny2qakeaHY">

cpassword:"2美元12美元BZ17rY63qrq.Fw9wC29A.eabcuAHSY0mXfxSvcpxOFGfUeW4NUkMO"

电子邮件:"[e-mail]"

名称:"abd">

电话:"1234567890">

token:(3)[{…}，{…}，{…}]

工作:"singer">

__v: 3

_id:"616 bf82d16a2951e53f10da4"

[[原型]]:对象

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>
)
}

Answer 1

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

尝试在每个字段中添加操作符:

userData?.name
userData?._id

等。

Answer 2

这是因为您将初始值设置为空，将被解释为原始值。当它最初渲染时它会发现你试图访问一个原始值的属性而这个属性并不存在。将初始值作为空对象，它将不再在这里抛出错误。useState({})