我正在循环使用.map在反应数组中。但是,此数组包含另一个数组,我不确定该如何遍历。

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

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

最佳答案

只需从属性images获取第一个元素,

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

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


Example

10-07 19:33
查看更多