如何解决UseEffect:无法读取属性
我试图从 mongodb 获取数据并显示在表上。我正在使用 useEffect 来调用 get 函数。但有时会弹出一个错误,它说无法读取“details.user._id”,但有时,它可以显示数据。任何人都可以帮忙吗?或者有没有一种干净的方法来做到这一点?非常感谢任何提示和帮助!
我的使用效果:
useEffect(() => {
getProfile();
getUser();
},[getUser(),getProfile()])
下面是我想要获取的数据 && getProfile 返回这个:
下面是一个表格:
const render_userProfile = (details,index) => {
return (
<tr key={index}>
<td>{details.user._id}</td>
<td>{details.user.fullName}</td>
<td>{details.user.email}</td>
<td>{details.icNumber}</td>
<td>{details.phoneNumber}</td>
<td>{details.dob}</td>
<td>{details.gender}</td>
<td>{details.address1 + " " + details.address2 + " " + details.city + " " + details.state + " " + details.zip}</td>
<td>{details.date}</td>
</tr>
)
}
解决方法
发生这种情况是因为在 React 开始渲染时的初始渲染中,details
状态为空并且它没有 _id
属性或任何属性,因此会引发错误。 useEffect
在初始渲染后运行。所以你的数据来晚了。因此,请使用条件重新分区。
const render_userProfile = (details,index) => {
return (
<tr key={index}>
<tr key={index}>
{
Object.keys(details).length ?
<React.Fragment>
<td>{details.user._id}</td>
<td>{details.user.fullName}</td>
<td>{details.user.email}</td>
<td>{details.icNumber}</td>
<td>{details.phoneNumber}</td>
<td>{details.dob}</td>
<td>{details.gender}</td>
<td>{details.address1 + " " + details.address2 + " " + details.city + " " + details.state + " " + details.zip}</td>
<td>{details.date}</td>
</React.Fragment>
:
<td>Loading...</td>
}
</tr>
)
}
这里的数据只有在细节中有一些对象时才会呈现,否则它会呈现loading...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。