どのように画像の配列を表示できますか？

Question

私は、APIを使用してデータを取得する反応ページを持っています。すべてのデータは正常にフェッチされますが、イメージの配列は取得できませんでした。私がこれについて書いたコードは

import React, {Component} from 'react'; 

export default class RoomDetail extends Component{ 
    constructor(props){ 
     super(props); 
     this.state = { rooms:[] } 
    } 
    componentDidMount(){ 
     console.log('componentDidMount'); 
     console.log(this.props.data.slug); 
     this.loadRoomFromServer(); 
    } 
    loadRoomFromServer(){ 
     $.ajax({ 
      url:'/api/v1/rental/'+this.props.data.slug, 
      dataType:'json', 
      success: (data) => { 
       console.log('data',data); 
       this.setState({rooms: data}); 
       }, 
       error: (xhr, status, err) => { 
       console.error(url, status, err.toString()); 
       } 
      }); 
    } 
    render() { 
     if(this.state.rooms.gallery){ 
      console.log(this.state.rooms.gallery); 
       let imageFile = this.state.rooms.gallery.map((image) => { 
      return(
        <img src={image.image} className="img-responsive" /> 
       ); 
      }); 

     } 
     if(this.state.rooms){ 
      console.log('rooms',this.state.rooms); 
      return (
      <div className="container-fluid"> 
       <div className="row"> 
        <div className="col-sm-12"> 
         <img src="" /> 
        </div> 
       </div> 
       <div className="col-md-6"> 
        <ul className="list-group"> 
         <li>Listing Name</li> 
         <li>Summary on Listing</li> 
         <li>Property Type</li> 
         <li>No of Rooms</li> 
         <li>Gallery</li> 
        </ul> 
       </div> 
       <div className="col-md-6"> 
        <ul className="list-group"> 
         <li>{this.state.rooms.listingName}</li> 
         <li>{this.state.rooms.summary}</li> 
         <li>{this.state.rooms.property}</li> 
         <li>{this.state.rooms.room}</li> 
         <li>{this.state.rooms.amenities}</li> 
        </ul> 
       </div> 
      </div> 
      ); 
     } 

     else{ 
      return <li>Nothing to display</li> 
     } 

    } 
} 

どのように表示できますか？ this.state.rooms.amenitiesの後に変数imageFileを使用すると、imageFileが定義されていないというエラーが表示されます。 imageFileはロードされていないので、定義されていないと言っているかもしれません。

Answer 1

これはリアクション特有のものではなく、単純なジャバスクリプトです。 letキーワードは、ブロックスコープ変数を定義します。つまり、ブロックスコープ変数は、その変数が存在する文のifにのみ存在します。二番目のプロパティのステートメントのチェックは、私は合理化好むならば、それは好きな最初ので

let imageFile; // Define the variable outside of the if statement 
if(this.state.rooms.gallery){ 
     console.log(this.state.rooms.gallery); 

     // Dump the `let` keyword inside of the if statement 
     imageFile = this.state.rooms.gallery.map((image) => { 
     // ... 
    }); 
} 
if (this.state.rooms) { 
    // Now `imageFile` can be accessed here too 
} 

：あなたは、それは他の場所で利用できるようにしたい場合は、もし外で定義する必要があり

if (this.state.rooms) { 
    let imageFile; 

    if (this.state.rooms.gallery) { 
     // Assign `imageFile here` 
    } 
}