React使用自定义组件渲染数组行时提示Building未定义如何解决

1 解决Building is not defined报错 #

这个报错的直接原因是你在使用Building组件的Homescreen.js文件中，没有导入该自定义组件。
你需要在Homescreen.js的顶部添加对应导入语句，路径根据你项目中Building组件的实际存储位置调整即可，示例：

// 比如Building组件存放在src/components/Building.js，Homescreen存放在src/screens/Homescreen.js
import Building from '../components/Building'

2 修正传值逻辑的隐藏问题 #

解决导入问题后你还会遇到新的报错，因为当前的传值逻辑不匹配：

• 父组件中你写的是<Building building={building.name}/>，此时传给building属性的值是字符串类型的楼宇名称
• 但子组件中你用{building.name}取值，相当于尝试从字符串上读取name属性，会得到undefined甚至报错。

两种修正方案二选一即可：

• 方案一：父组件传递完整的building对象，子组件无需修改
  将调用代码改为：

  <Building building={building}/>
  

• 方案二：父组件仅传递名称，子组件对应修改取值逻辑
  父组件调用代码：

  <Building name={building.name}/>
  

  子组件代码修改为：

  import React from 'react'
  
  function Building({name}) {
    return (
      <div className="row">
        <h1>{name}</h1>
      </div>
    )
  }
  
  export default Building
  

附加优化建议 #

使用map渲染列表时，建议给每一项的根元素添加唯一的key属性，避免React抛出列表渲染警告，示例：

buildings.map((building) => {
  return <div className="col-md-9" key={building.id}> 
    <Building building={building}/>
  </div>
})

内容的提问来源于stack exchange，提问作者VonHugenstein