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

IT技术 javascript reactjs loops
2021-04-20 05:53:24

我映射了多个对象。 [{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}]
1个回答

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

     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>
              );
        }
对不起，这是一个类型意味着城市而不是国家
2021-05-24 05:53:24
我用国家对象编辑了我的问题。所以如果我做 <h4>{city.visitor}</h4> 我不会得到每个国家，但它看起来像法国，（访客）34,1234,124
2021-05-30 05:53:24
感谢您的回答。如果我使用你的解决方案，我会得到错误的结果。假设我（例如）5 个国家/地区。每个国家有5个城市。然后我会得到法国加上所有 5 个国家的所有城市，而不是一个
2021-06-05 05:53:24
正如我根据您的数据对象{name:"y", country:"US", cities:[obj,obj,ob]}城市是美国国家内的城市，是吗？您的城市对象看起来如何。我想你也需要在你的问题中添加
2021-06-09 05:53:24
在您的问题中，该对象包含名称国家和城市，但不包含国家 {name:"y", country:"US", cities:[obj,obj,ob]}
2021-06-09 05:53:24
其它你可能感兴趣的问题
上一篇无法通过react-router将props传递给组件 下一篇如何调用多个函数之一 - JavaScript？