通過數組對象迭代陣營

Question

我有以下數據結構（對象的數量不限於僅五）：

Object {name: "objectName}, data: Array} 
Object {name: "objectName}, data: Array} 
Object {name: "objectName}, data: Array} 
Object {name: "objectName}, data: Array} 
Object {name: "objectName}, data: Array} 

data屬性是一個多維Array充滿對象（其數量不限太）具有以下結構：

[ 
    { 
     property: "value", 
     property2: "value" 
    }, 
    { 
     property: "value", 
     property2: "value" 
    } 
] 

在這裏我遇到了訪問這些對象及其值的麻煩，我想顯示。 下面是我使用的是什麼：

Object.keys(this.state.items).map((k, index) => <li key={index}>{ `${k}: ${this.state.items[k]}` }</li> 

它給了我下面的輸出：

name: propertyName 
data: [object Object],[object Object], [n, n] 

其中n代表的事實，有對象的數量不受限制。 那麼我怎麼才能正確地迭代通過這個結構來最終獲得object值？我想將其顯示爲

{item.property} 

等等。 在此先感謝！

Answer 1

迭代項目，然後迭代每個項目的數據。

class App extends React.Component { 
     state = { 
     items: [ 
      { 
      id: 1, 
      name: 'name 1', 
      data: [ 
       { id: 1, property: 'Property 1' }, 
       { id: 2, property: 'Property 2' } 
      ], 
      }, 
      { 
      id: 2, 
      name: 'name 2', 
      data: [ 
       { id: 1, property: 'Property 3' }, 
       { id: 2, property: 'Property 4' } 
      ], 
      } 
     ] 
     } 
     render() { 
     return (
      <ul> 
      {this.state.items.map((row) => { 
       return (
       <li key={row.id}> 
        <div>{row.name}</div> 
        <ul> 
        {row.data.map(innerRow => { 
         return <li key={innerRow.id}>{innerRow.property}</li> 
        })} 
        </ul> 
       </li> 
      ) 
      })} 
      </ul> 
     ) 
     } 
    }