反应:映射嵌套的对象数组 [英] REACT: Map over nested array of objects

问题描述

我试图映射对象数组，每个数组包含另一个嵌套的对象数组.但是，该映射不适用于嵌套数组.如何映射嵌套数组的内容，同时将所有 content 保持在父对象的相同 title 下?

小提琴: https://jsfiddle.net/69z2wepo/249197/

数据结构如下:

<预><代码>[{标题:标题1"，内容: [{imageUrl: "http://placehold.it/300x300",title: "广告系列",描述:用一句话解释这种设计的使用的简短描述."},{imageUrl: "http://placehold.it/300x300",title: "事件",描述:用一句话解释这种设计的使用的简短描述."},{imageUrl: "http://placehold.it/300x300",title: "将军",描述:用一句话解释这种设计的使用的简短描述."}]},{标题:标题2"，内容: [{imageUrl: "http://placehold.it/300x300",title: "视频模板 A",描述:用一句话解释这种设计的使用的简短描述."},{imageUrl: "http://placehold.it/300x300",title: "视频模板 A",描述:用一句话解释这种设计的使用的简短描述."}]}];

地图看起来像

{dataItems.map((item, index) => {返回 (<h1>{item.title}</h1>//对于每个项目，遍历内容数组对象<img src={item.content.imageUrl}/><h3>{item.content.title}</h3><h3>{item.content.description}</h3><小时/>);})}

解决方案

由于每个元素都有一个 content 数组，你必须 map over content> 也是.

示例

{dataItems.map((item, index) => (<div key={index}><h1>{item.title}</h1>{item.content.map((c, i) => (<div key={i}><img src={c.imageUrl}/><h3>{c.title}</h3><h3>{c.description}</h3><小时/>

))}

))}

I am trying to map over array of objects which each array contains another nested array of objects. However, the map does not work on the nested array. How do i map over the contents of the nested array while keeping all the content under the same title of the parent object?

Fiddle: https://jsfiddle.net/69z2wepo/249197/

The data structure looks like:

[
  {
    title: "title1",
    content: [
      {
        imageUrl: "http://placehold.it/300x300",
        title: "Campaigns",
        description:
          "Short description explaining the use of this design in a single sentence."
      },
      {
        imageUrl: "http://placehold.it/300x300",
        title: "Events",
        description:
          "Short description explaining the use of this design in a single sentence."
      },
      {
        imageUrl: "http://placehold.it/300x300",
        title: "General",
        description:
          "Short description explaining the use of this design in a single sentence."
      }
    ]
  },
  {
    title: "title2",
    content: [
      {
        imageUrl: "http://placehold.it/300x300",
        title: "Video Template A",
        description:
          "Short description explaining the use of this design in a single sentence."
      },
      {
        imageUrl: "http://placehold.it/300x300",
        title: "Video Template A",
        description:
          "Short description explaining the use of this design in a single sentence."
      }
    ]
  }
];

The map looks like

{dataItems.map((item, index) => {
  return (
    <h1>{item.title}</h1>
    // for each item, loop over the content array objects
    <img src={item.content.imageUrl} />
    <h3>{item.content.title}</h3>
    <h3>{item.content.description}</h3>
    <hr />
  );
})}

解决方案

Since each element has a content array, you must map over content as well.

Example

{dataItems.map((item, index) => (
  <div key={index}>
    <h1>{item.title}</h1>
    {item.content.map((c, i) => (
      <div key={i}>
        <img src={c.imageUrl} />
        <h3>{c.title}</h3>
        <h3>{c.description}</h3>
        <hr />
      </div>
    ))}
  </div>
))}

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