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

Posted 2023-02-22

【中文标题】反应：映射嵌套的对象数组

【英文标题】：REACT: Map over nested array of objects

【发布时间】：2019-01-07 23:29:19

【问题描述】：

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

【问题讨论】：

我想你只需要item.content.map((content, index) => ...)

【参考方案1】：

这是一个工作示例。

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>

【参考方案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>
))