通过数组对象迭代阵营

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