Wie könnte ich ein Array von Bildern anzeigen?

Question

Ich habe eine Reaktionsseite, wo die Daten mit einem API abgerufen werden. Alle Daten werden erfolgreich abgerufen, aber das Array von Bildern konnte nicht abgerufen werden. Der Code, den ich dafür geschrieben habe, ist

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

    } 
} 

Wie kann ich alle Bilder anzeigen? Wenn ich die Variable imageFile nach this.state.rooms.amenities verwendet habe, bekomme ich eine Fehlermeldung, dass imageFile nicht definiert ist. imageFile ist nicht geladen, sodass es möglicherweise nicht definiert ist.

Answer 1

Dies ist nicht React spezifisch, es ist nur javascript. Das Schlüsselwort let definiert eine Blockbereichsvariable, d. H. Es existiert nur in der if-Anweisung, wo es sich befindet. Wenn Sie es möchten, an anderer Stelle zur Verfügung stehen, sollten Sie es außerhalb der if definieren:

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 
} 

Seit der ersten if-Anweisung prüft, ob eine Eigenschaft des zweiten, ziehe ich würde zu rationalisieren es mag:

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

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