Reactjs: у меня проблемы с картой () на вложенном массиве

Question

Когда я использую 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",
        }]
       }...

Вот код для возврата обоих Google Home и Smart Bulb в отдельных Bootstrap Cards:

{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. Обратите внимание, что я хочу вернуть Google Home и Smart Bulb в двух отдельных Cards. Любая помощь будет принята с благодарностью, спасибо!

Answer 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>
       )
     }
  })}

Answer 2

У вас есть 2 уровня в вашем массиве, когда вы делаете props.house.map, вы получаете только объект первого уровня: жилище. Если вы хотите перечислить все комнаты жилища, то вам нужно составить вторую карту, подобную этой:

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