TypeError：无法读取ReactJs中未定义的属性'map'并且错误：对象作为React子元素无效

如何解决TypeError：无法读取ReactJs中未定义的属性'map'并且错误：对象作为React子元素无效

我正在将具有Laravel后端的React App设置为API提供程序。呈现两种不同类型的对象时，我遇到两个不同的错误。

我的数据如下：

{
  "id": 1,"name": "Harshit Mahajan","father_name": "R Mahajan","phone_number": "1234","place": {
    "id": 1,"name": "Khargone"
  },"mortages": [
    {
      "id": 2,"items": "item1,item2","amount": "20000.00","mortage_at": "2020-08-31 20:09:26","status": {
        "name": "Not Cleared"
      }
    },{
      "id": 3,"items": "item3,item4","amount": "12000.00","mortage_at": "2020-08-31 20:09:56","status": {
        "name": "Not Cleared"
      }
    }
  ]
}

我可以通过编写以下代码来呈现以下内容：

{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: Cannot read property 'name' of undefined

对于此代码，出现此错误：

{this.props.mortage.place}

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

情况2：另外，当我尝试通过以下方式访问抵押品阵列时：

{this.props.mortage.mortages.map(m => <div>{m.item}</div> )}

TypeError: Cannot read property 'map' of undefined

我在做什么错了？

解决方法

这是React和props的一个常见问题，即在渲染组件时可能不会填充props。因此，该组件实际上会多次渲染并为我们显示信息。

要了解为什么会发生这种情况，仅当所有必需的数据都存在时，才需要渲染组件（例如，使用map()或常规方式包括它）。

快速而肮脏的解决方案是：

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

检查上面的值是否存在，然后显示该值。如果您使用的是最新版本的Node JS来运行它，而我使用的是最新版本的React，请使用以下命令：

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

调试

调试此信息的最佳方法是亲自使用此方法：

<pre>{JSON.stringify(this.props,null,2)}</pre>

这将告诉我内容。因此，在先加载数据而又不加载数据的情况下，基于此，我开始调试过程。

此外，在渲染功能中，如果您可以添加：

console.log(this.props);

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

再一次，你并不孤单。在使用React和其他虚拟DOM的反应式编程语言中，这很常见。