Javascript 嵌套数组。映射而不循环父数组

例如：

我创建了一个名为ProjectAPI的JSON对象

  const ProjectAPI = {
      projects: [
        { 
          name: "PROJECT NAME", 
          thumbnail: "imageURL",
          image: [
            "imageURL",
            "imageURL",
            "imageURL" 
          ]
        },{ 
          name: "PROJECT NAME", 
          thumbnail: "imageURL",
          image: [
            "imageURL",
            "imageURL",
            "imageURL" 
          ]
        }],
  all: function() { return this.projects},
  get: function(id) {
    const isProject = p => p.number === id
    return this.projects.find(isProject)
  }
    }

然后我使用.map获取嵌套图像：

 {
        ProjectAPI.all().map(function(item, index) {
          return <img className="img" key={index} src={item.image[index]} />
        })
      }

{
ProjectAPI.all（）.map（函数（项、索引）{
返回
})
}

但是它似乎在父数组中循环，因此我最终得到6个图像，而不是3个（在JSFIDLE示例中为红色边框）

如何才能将嵌套图像作为目标？

问题在于：

src={item.image[index]}

index

是

projects

数组中的索引，它来自

0..n

，其中

n

是

projects

数组中的对象数。对于第四项，您正在尝试输出

项目[3].image[3]

，如果该图像数组仅包含三个图像，则该值为零

---

如果要输出每个项目的所有三个图像，还需要在各个图像上循环。

因为图像又是一个数组，所以还需要在该数组上运行map

这样写：

{
    ProjectAPI.all().map((item, index) => {
        return item.image.map((el,j) => <img className="img" key={j} src={el} />)
    })
}

ProjectAPI.all()[0].image.map((el,i) => <img className="img" key={i} src={el} />)

{
ProjectAPI.all（）.map（（项目，索引）=>{
返回item.image.map（（el，j）=>）
})
}

更新：

---

您需要第一个对象的前三个图像，因此不需要使用嵌套贴图，请按如下方式编写：

{
    ProjectAPI.all().map((item, index) => {
        return item.image.map((el,j) => <img className="img" key={j} src={el} />)
    })
}

ProjectAPI.all()[0].image.map((el,i) => <img className="img" key={i} src={el} />)

ProjectAPI.all（）[0].image.map（（el，i）=>）

---

需要在图像对象中指定图像url的索引。因为在代码的map函数中指定了增量数字0到5（数据的长度）。但是图像数组没有map函数的index值

var Hello = React.createClass({
  render: function() {
    return (
    <div>
     {
        ProjectAPI.all().map(function(item, index) {
          return <img className="img" key={index} src={item.image[0]} />
        })
      }
    </div>
    );
  }
});

var Hello=React.createClass({
render:function（）{
返回(
{
ProjectAPI.all（）.map（函数（项、索引）{
返回
})
}
);
}
});

所以我最终得到了6张图片而不是3张

你是说

3张图片而不是6张

？是的，3张图片而不是6.maybe item.image.map？@Jonasw抱歉我的错误，更新了答案谢谢：）如果我只想得到前3张图片，怎么样，现在它获得了

项目

数组的第一个对象的前三个图像？是的，因为每个对象在我的应用程序中都是不同的页面