在react中渲染嵌套的对象数组 [英] Render a nested array of objects in react

问题描述

我映射多个对象。
[{name：y，country：US，cities：[obj，obj，ob]}，{name：y，country：US，cities： [obj，obj，ob]}]

我如何嵌套一个循环，所以我先遍历对象然后迭代（in这个例子）城市？谢谢!!

How can I nest a loop so I first iterate through the objects and then iterate through (in this example) cities?Thanks!!

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

my render function without the nested look looks like this :

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

推荐答案

你可以利用嵌套地图来映射内在的孩子也喜欢

you can make use of nested map to map over the inner child obejcts as well like

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

这篇关于在react中渲染嵌套的对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！