Reactjs 如何在React Js中映射二维数组

Projects.js

 constructor() {
  super();
  this.state = {
     projects: [] 
  }
}

componentWillMount() {
  this.setState({
     projects: [
        {
           link: '/',
           img: 'img.jpg',
           title: 'Title',
           date: 'Jul 2017',
           description: 'Description',
           icons: 
           [
              {
                 src: 'icon.svg',
                 content: 'Content'
              },
              {
                 src: 'icon2.svg',
                 content: 'Content 2'
           ]
        }
     ]
   });
  }

render() {
   return (
      <section className="projects">
         <ProjectsList projects={this.state.projects} />
      </section>
   );
  }
}

constructor（）{
超级（）；
此.state={
项目：[]
}
}
组件willmount（）{
这是我的国家({
项目：[
{
链接：“/”，
img:'img.jpg'，
标题：“标题”，
日期：2017年7月，
description:'description'，
图标：
[
{
src:'icon.svg'，
内容：“内容”
},
{
src:'icon2.svg'，
内容：“内容2”
]
}
]
});
}
render（）{
返回(
);
}
}

ProjectsList.js

let projectItems;

projectItems = this.props.projects.map(project => {
  return (
    <ProjectItem key={project.title} project={project}  />
  ) 
});

return (
   <div id="projectsList">
     {projectItems}
   </div>
)

let投影项；
projectItems=this.props.projects.map（项目=>{
返回(
) 
});
返回(
{projectItems}
)

我想创建一个底部有图标列表的项目卡。我可以映射项目数组，但图标不起作用。有人知道如何在ReactJs中映射这个2d数组吗？谢谢

只需再次使用地图：

projectItems = this.props.projects.map(project => {
  return (
    <div>
      <ProjectItem key={project.title} project={project}  />
      { 
        project.icons.map(i => <img key={i.src} src={i.src} alt="" />) 
      }
    </div>
  ) 
});

projectItems=this.props.projects.map（project=>{
返回(
{ 
project.icons.map（i=>）
}
) 
});

---

当然，您可以在ProjectItem组件中的

项目项中执行此操作，您需要在图标上进行映射。您的ProjectItem组件将如下所示

const ProjectItem = ({project}) => {
    return (
        <div className={'card'}>
            {/*content for link, img, title, description here */}
             {project.icons.map((icon, key) => <img src={icon.content} />)}
        </div>
    )
}

constprojectItem=（{project}）=>{
返回(
{/*此处链接、img、标题、说明的内容*/}
{project.icons.map（（icon，key）=>）}
)
}
数组=[[null，null，null]，[null，null，null]]
返回(
{array.map（x=>x.map（y=>{..}））}
)

再次将其映射到数组中将给出值
，感谢您的快速回答。我已经把你的代码放在ProjectItem里面了，但是它说projectItems是未定义的。抱歉打扰你，我是个十足的傻瓜。
array = [[null,null,null],[null,null,null]]

return (
<div> {array.map(x=> x.map(y=> <div>{....}</div> ))}</div>
)