Question

我正在使用.map循环遍历一个数组。但是，这个数组包含另一个数组，我不确定如何循环。

我目前的代码如下所示。 我要找的结果是我从每个图像数组中得到第一张图片。

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

REACT CODE

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

Answer 1

从属性images获取第一个元素，

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

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

Example

Answer 2

你应该这样做

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

将图像分配给变量，然后使用该变量循环内部对象。

＆＃13;

var App = React.createClass({
   getInitialState: function() {
      return {data: []}
   },

   componentDidMount: function(){
      this.getData();
   },

   getData: function() {
     var data = [
   {
      id:"1",
      images:['image1', 'image2', 'image3']
   },
   {
      id:"2",
      images:['image4', 'image5', 'image6']
   }
];
     this.setState({data: data});
    },

   render: function(){
      return(<List images={this.state.data} />)
   }
});

var List = React.createClass({

    render: function() {
        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>
            )
        })
        return(
            <div>
                <p>{images}</p>
            </div>
        )       
    }
});
     
ReactDOM.render(<App />, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

Answer 3

这是一个工作小提琴，我相信这是你想要的输出。

https://jsfiddle.net/m8q63gkk/

＆＃13;

// This is the most important line
var images = this.props.images.map(function(image {
            return(image.images[0]); // updated here
        })

＆＃13;

react - 通过另一个数组中包含的数组进行MAP

3 个答案: