Javascript react-通过另一个数组中包含的数组进行映射

我使用

.map

在react中循环一个数组。但是，这个数组包含另一个数组，我不确定如何循环

我目前拥有的代码如下所示我正在寻找的结果是，我从每个图像数组中获取第一个图像。

//RETURNED FROM AJAX CALL 
[
   {
      id:"1",
      images:['image1', 'image2', 'image3']
   },
   {
      id:"2",
      images:['image4', 'image5', 'image6']
   }
];

反应代码

var App = React.createClass({
   getInitialState: function() {
      return {data: []}
   },

   componentDidMount: function(){
      this.getData();
   },

   getData: function() {
      $.ajax({
          url:'.....',
          method: 'GET',
          success: function(response){
              this.setState({data: response});
          }.bind(this)
      })
    },

   render: function(){
      return(<List images={this.state.data} />)
   }
});

var List = React.createClass({

    render: function() {
        var images = this.props.images.map(function(image){
            //want to return the first image from each images array..
        })
        return(
            <div>
                <p>{images}</p>
            </div>
        )       
    }
});

var-App=React.createClass({
getInitialState:函数（）{
返回{data:[]}
},
componentDidMount:function（）{
这是getData（）；
},
getData:function（）{
$.ajax({
网址：‘……’，
方法：“GET”，
成功：功能（响应）{
this.setState（{data:response}）；
}.绑定（此）
})
},
render:function（）{
返回（）
}
});
var List=React.createClass({
render:function（）{
var images=this.props.images.map（函数（图像）{
//要从每个图像数组返回第一个图像。。
})
返回(
{图像}

)       
}
});

你应该这样做

var images = this.props.images.map(function(image, index){
        var img = image.images;
        return (
          <div>
        {img.map(function(value, index) {
          return <div key={index}>{value}</div>
        })}

        </div>
        )
    })

var images=this.props.images.map（函数（图像，索引）{
var img=image.images；
返回(
{img.map（函数（值，索引）{
返回{value}
})}
)
})

将图像指定给变量，然后使用该变量在内部对象上循环

var-App=React.createClass({
getInitialState:函数（）{
返回{data:[]}
},
componentDidMount:function（）{
这是getData（）；
},
getData:function（）{
风险值数据=[
{
id:“1”，
图像：['image1'，'image2'，'image3']
},
{
id:“2”，
图像：['image4'，'image5'，'image6']
}
];
this.setState（{data:data}）；
},
render:function（）{
返回（）
}
});
var List=React.createClass({
render:function（）{
var images=this.props.images.map（函数（图像，索引）{
var img=image.images；
返回(
{img.map（函数（值，索引）{
返回{value}
})}
)
})
返回(
{图像}

)       
}
});
ReactDOM.render（，document.getElementById（'app'））
只需从属性
图像中获取第一个元素

var List = React.createClass({
  render: function() {
    var images = this.props.images.map(function(item) {
      return item.images[0]; 
                        ^^^
    });

    return <div>{ images }</div>       
  }
});

var List=React.createClass({
render:function（）{
var images=this.props.images.map（函数（项）{
返回项目。图像[0]；
^^^
});
返回{images}
}
});

这是一把工作小提琴，我相信这是您希望得到的输出



//这是最重要的一行
var images=this.props.images.map（函数（图像{
return（image.images[0]）；//在此处更新
})
您想实现什么？另外，您当前的map函数只返回数组中未修改的每个项目；这相当于将数组分配给一个新变量（即
var images=this.props.images
）@我更新了问题，我只是在寻找图片中的第一张图片array@gfullam我更新了问题