react - 別の配列に含まれる配列を介したMAP

Question

.mapを使用して反応で配列をループしています。しかし、この配列には別の配列が含まれています。これはどのようにループするかわかりません。

私が現在持っているコードは、以下のようになります。 私が探している結果は、各画像配列から最初の画像を取得することです。

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

は、あなたがそれを

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

ただ、ここで

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

CODEをREACT。

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

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

Answer 3

、プロパティimagesから最初の要素を取得し、作業フィドルで、私は、これはあなたが得ることを望んだの出力であると考えています。

https://jsfiddle.net/m8q63gkk/

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