Javascript 按键分组的React js中的渲染对象

我的数据结构如下：

{
  oldPics: {
    [title: 'dog', url: 'www.dog.com'],
    [title: 'cat', url: 'www.cat.com'],
    [title: 'bird', url: 'www.bird.com'],
  },

  newPics: {
    [title: 'fox', url: 'www.fox.com'],
    [title: 'lion', url: 'www.lion.com'],
  },

  archivedPics: {
    [title: 'eagle', url: 'www.eagle.com'],
    [title: 'fish', url: 'www.fish.com'],
    [title: 'monkey', url: 'www.monkey.com'],
  },
}

我想这样显示数据：

<div>
  <div>
    <h3>old</h3>
    <p>title: dog, url: www.dog.com</p>
    <p>title: cat, url: www.cat.com</p>
    <p>title: bird, url: www.bird.com</p>
  </div>


  <div>
    <h3>new</h3>
    <p>title: fox, url: www.fox.com</p>
    <p>title: lion, url: www.lion.com</p>
  </div>

  <div>
    <h3>archived</h3>
    <p>title: eagle, url: www.eagle.com</p>
    <p>title: fish, url: www.fish.com</p>
    <p>title: monkey, url: www.monkey.com</p>
  </div>
</div>

古老的
标题：狗，网址：www.dog.com

标题：cat，网址：www.cat.com

标题：bird，网址：www.bird.com

新的
标题：福克斯，网址：www.fox.com

标题：lion，网址：www.lion.com

存档
标题：eagle，网址：www.eagle.com

标题：鱼，网址：www.fish.com

标题：猴子，网址：www.monkey.com

我已尝试在我的组件中按如下方式呈现它，但它呈现空的

元素：

  _renderPics(group) {

    const content = []

    const piccies = Object
                    .keys(group)
                    .map(key => content.push(
                        <div key={key}>title: {group[key].title} url: {group[key].url}</div>
                    ));
    return content

  }

\u renderPics（组）{
常量内容=[]
常量=对象
.钥匙（组）
.map（键=>content.push(
标题：{group[key].title}url:{group[key].url}
));
返回内容
}

---

有什么想法吗？

您必须从

oldPics: {
 [title: 'dog', url: 'www.dog.com'],
 [title: 'cat', url: 'www.cat.com'],
 [title: 'bird', url: 'www.bird.com'],
}

到

然后

{Object.keys（group.map）（key，y）=>
{key.replace（'Pics'，''）}
{组[key].map（（项，y）=>
标题：{item.title}url:{item.url}
)}
)}

---

假设您的数据结构在实际情况中是正确的，两个嵌套的映射应该可以完成这项工作：

_renderPics(group) {
  return Object
    .keys(group)
    .map((key, index) => (
      <div key={index}>
        <h3>{key.replace('Pics', '')}</h3>
        {group[key].map((pic, i) => (
          <div key={i}>title: {pic.title}, url: {pic.url}</div>
        ))}
      </div>
    ));
}

\u renderPics（组）{
返回对象
.钥匙（组）
.map（（键，索引）=>(
{key.replace（'Pics'，''）}
{group[key].map（（pic，i）=>(
标题：{pic.title}，url:{pic.url}
))}
));
}

---

演示：

它呈现空的html元素

{Object.keys(group).map((key, y) =>
  <div key={y}>
    <h3>{key.replace('Pics', '')}</h3>
      {group[key].map((item, y) =>
      <div key={y}>title: {item.title} url: {item.url}</div>
      )}
  </div>
)}

_renderPics(group) {
  return Object
    .keys(group)
    .map((key, index) => (
      <div key={index}>
        <h3>{key.replace('Pics', '')}</h3>
        {group[key].map((pic, i) => (
          <div key={i}>title: {pic.title}, url: {pic.url}</div>
        ))}
      </div>
    ));
}