在反應中呈現對象的嵌套陣列

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