Javascript TypeError:无法读取属性'；地图'；ReactJs中未定义的和错误：对象作为React子对象无效

我正在使用Laravel后端设置React应用程序作为API提供程序。对于渲染两种不同类型的对象，我得到了两个不同的错误

我的数据如下所示：

{
“id”：1，
“名称”：“Harshit Mahajan”，
“父亲的名字”：“R Mahajan”，
“电话号码”：“1234”，
“地点”：{
“id”：1，
“name”：“Khargone”
},
“抵押”：[
{
“id”：2，
“项目”：“项目1、项目2”，
“金额”：“20000.00”，
“抵押处”：“2020-08-31 20:09:26”，
“地位”：{
“名称”：“未清除”
}
},
{
“id”：3，
“项目”：“项目3、项目4”，
“金额”：“12000.00”，
“抵押处”：“2020-08-31 20:09:56”，
“地位”：{
“名称”：“未清除”
}
}
]
}

通过编写此代码，我能够呈现以下内容：

{this.props.mortage.name}{/*Harshit-Mahajan*/}
{this.props.mortage.father_name}{/*R Mahajan*/}
{this.props.mortage.phone_number}{/*1234*/}

案例1:但当我尝试通过以下方式访问地名时：

{this.props.mortage.place.name}

我得到一个错误：

TypeError:无法读取未定义的属性“name”

对于此代码，我得到以下错误：

{this.props.mortage.place}

错误：对象作为React子对象无效（找到：具有键的对象 {id，name}）。如果要渲染子对象集合，请使用 而不是数组

案例2:当我尝试通过以下方式访问抵押物阵列时：

{this.props.mortage.mortages.map（m=>{m.item}}

TypeError:无法读取未定义的属性“map”

---

我做错了什么？

这是React和

道具的一个常见问题，组件渲染时可能无法填充
道具。因此，组件实际渲染多次，并为我们显示信息

要了解发生这种情况的原因，您需要仅当所有必需的数据都存在时才渲染组件（例如，使用
map（）
或普通方式包括它）

解决这一问题的快捷方法是：

{this.props.mortage && this.props.mortage.place && this.props.mortage.place.name}

检查是否存在上述值，然后显示该值。如果您使用最新版本的Node JS来运行它，并且使用最新版本的React（我认为是这样），请使用以下命令：

{this.props?.mortage?.place?.name}

调试

调试此信息的最佳方法是，我个人使用以下方法：

作为第一条语句，您实际上可以看到
道具
是如何填充的

再一次，你并不孤单。这在使用React等虚拟DOM的反应式编程语言中很常见。
使用
{This.props.mortage.place}
并查看它是否返回任何错误我感觉渲染时没有填充
道具。但我得到的是父亲的姓名和电话号码，就像你的数据不是你期望的那样。请尝试呈现
{JSON.stringify（this.props.mortage，null，2）}
以查看您的数据实际是什么。@HarshitMahajan我用React代码格式更新了您的问题…谢谢，这按预期工作{this.props.mortage&&this.props.mortage.place&&this.props.mortage.place.name}@HarshitMahajan很棒。我很确定，会有几个渲染，大多数渲染都会有空的
道具
，
null
道具
或类似的东西。是的，再次感谢。可能是我在渲染“抵押”时犯的相同错误array@HarshitMahajan是的，也尝试使用其他选项！
<pre>{JSON.stringify(this.props, null, 2)}</pre>

console.log(this.props);