我通过多个对象进行映射。
[{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}]
最佳答案
您也可以使用嵌套映射来映射内部子对象
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>
);
}
关于javascript - 在 react 中渲染嵌套的对象数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45391680/