react：映射嵌套的对象数组

IT技术 javascript arrays reactjs ecmascript-6
2021-03-23 20:20:14

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

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

数据结构如下所示：

[
  {
    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."
      }
    ]
  }
];

地图看起来像

{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 />
  );
})}
2个回答

由于每个元素都有一个content数组，因此您也必须map结束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>
        <hr />
      </div>
    ))}
  </div>
))}

这是一个工作示例。

const dataItems = [{
    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."
      }
    ]
  }
];

class App extends React.Component {
  render() {
    return <div> 
    {
      dataItems.map((item, index) => {
        return ( <div>
            <h1>{item.title}</h1>
            { item.content.map((c, i) => <div>
            <h3>{c.title}</h3>
            <h3>{c.description}</h3>
            </div>)}
          </div>
        )
      })
    }
    </div>
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

其它你可能感兴趣的问题
上一篇React：单独保留组件的内容 下一篇如何使用对象数组中的 usestate 更新状态？