在反应中呈现对象的嵌套阵列

Question

我通过多个对象进行映射。 [{name:"y", country:"US", cities:[obj,obj,ob]},{name:"y", country:"US", cities:[obj,obj,ob]}]

我怎样才能嵌套一个循环，所以我第一遍迭代对象，然后遍历（在这个例子中）城市？谢谢！

我的渲​​染功能，无需嵌套的样子看起来是这样的：

render() { 
    const persons = this.state.name.map((item, i) => { 
    return (
     <div> 
     <h5> {item.name} </h5> 
     <h5> {item.country} </h5> 
     //here I would like to show the cities 
     </div> 
    ); 
    }); 
    return (
    <div> 
     <div className = "panel-list"> 
     All: {persons} 
     </div> 
    </div> 
); 
} 

城市对象的例子：

[{visitors:34, rating:4}, 
{visitors:1234, rating:1}, 
{visitors:124, rating:2}] 

Answer 1

，您可以利用嵌套地图的绘制在内部子obejcts以及像

 render() { 
      const persons = this.state.name.map((item, i) => { 
       return (
        <div> 
         <h5> {item.name} </h5> 
         <h5> {item.country} </h5> 
         <h4>{item.cities.map((city) => { 
          return (<li>{/* city object details here*/}</li>) 
         })}</h4> 
        </div>); 
      }); 
      return (
      <div> 
       <div className = "panel-list"> 
        All: {persons} 
       </div> 
      </div> 
      ); 
     }