在react中渲染嵌套的对象数组

时间:2017-07-29 16:42:19

标签: javascript reactjs loops

我映射多个对象。     Prelude> import Heap

如何嵌套循环,以便我首先遍历对象,然后遍历(在此示例中)城市?谢谢!!

没有嵌套外观的渲染函数如下所示:

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

1 个答案:

答案 0 :(得分:3)

您可以使用嵌套地图来映射内部子对象以及

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