反应：映射对象的嵌套数组

Question

我试图映射对象数组，每个数组包含另一个嵌套的对象数组。 但是，该映射不适用于嵌套数组。 我如何映射嵌套数组的内容，同时将所有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 />
  );
})}

Answer 1

由于每个元素都有一个content数组，因此您还必须在content map 。

例

{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>
))}

Answer 2

这是一个有效的例子。

 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>