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

I map through multiple objects.

[{name:"y", country:"US", cities:[obj,obj,ob]},{name:"y", country:"US", cities:[obj,obj,ob]}]

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 (

{item.name}

{item.country}

//here I would like to show the cities

);

});

return (

All: {persons}

);

}

Cities object example:

[{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 (

{item.name}

{item.country}

{item.cities.map((city) => {

return (

{/* city object details here*/})

})}

);

});

return (

All: {persons}

);

}