Question

示例：https://jsfiddle.net/zidski/a0ez5sy9/1/

我创建了一个名为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]} />
        })
      }

但似乎循环通过父数组，所以我最终得到6个图像而不是3个（在jsfiddle示例中为边框红色）

我如何定位嵌套图像？

Answer 1

由于图像又是一个数组，因此您还需要在其上运行地图。

这样写：

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

<强> Fiddle with all the images

<强> Fiddle with only three images

Answer 2

问题在于：

src={item.image[index]}

index是projects数组中的索引，它来自0..n，其中n是projects数组中的对象数。对于第四项，您尝试输出projects[3].image[3]，如果该图像数组仅包含三个图像，则无效。

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

Answer 3

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

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

嵌套数组.map而不循环父数组

3 个答案: