Reactjs：在嵌套数组上遇到 map() 挑战答案

【问题标题】：Reactjs: Am having challenges with map() on nested ArrayReactjs：在嵌套数组上遇到 map() 挑战
【发布时间】：2020-04-08 13:48:17
【问题描述】：

当我使用 map() 返回数据库中设备的名称时，它只返回名字。
我对 JavaScript 不是很有信心，所以这可能是一个简单的问题。

这是我的数据库：

[{
   "dwelling_id": 1,
   "rooms": [{
       "room_id": 1,
       "room_name": "Living Room",
       "devices": [{
          "id": 1,
          "device_name": "Google Home",
        }]
      },
      {
        "room_id": 2,
        "room_name": "BedRoom",
        "devices": [{
           "id": 2,
           "device_name": "Smart Bulb 1",
        }]
       }...

这是在单独的 Bootstrap Cards 中返回 Google Home 和 Smart Bulb 的代码：

{props.house.map(house => {
     return (
        <React.Fragment>
           <Card>
              <Card.Body>
                 <Card.Title>
                   {house.rooms[0].devices[0].device_name}
                 </Card.Title>
              </Card.Body>
           </Card>
        </React.Fragment>
     )}
})}

如果我这样做：

// If I change this...
{house.rooms[0].devices[0].device_name} 
// to...
{house.rooms[1].devices[0].device_name}

我的代码只返回Smart Bulb。
请注意，我想在两个单独的Cards 中同时返回Google Home 和Smart Bulb。
任何帮助将不胜感激，谢谢！

【问题讨论】：

这个map是房子（顶层数组），你需要下一个maps里面的rooms和devices

标签： javascript html reactjs database

【解决方案1】：

您需要在我们的第一个地图中执行第二个和第三个 .map 才能返回两个房间：

{props.house.map(house => {

     return (
         <React.Fragment>
             <Card>
                 <Card.Body>
                     {
                         house.rooms.map((room) => (
                             room.map((device) => (
                                <Card.Title>{device.device_name}</Card.Title>
                             )
                         )
                      }
                 </Card.Body>
              </Card>
          </React.Fragment>
       )
     }
  })}

【讨论】：

【解决方案2】：

您的数组中有 2 个级别，当您执行 props.house.map 时，您只会得到第一个级别的对象：住宅。如果要列出住宅的所有房间，则需要制作第二张地图，如下所示：

props.house.map(dwelling => {
  dwelling.map(room => {
    console.log(room.devices[0].device_name);
  }
})

【讨论】：

非常感谢！