我如何显示图像阵列？

Question

I have a react page where the data are fetched using an api. All the data are fetched successfully but the array of images could not get fetched. The code that i have written for this is

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

    }
}

How can i display all the images ? If i used the variable imageFile after this.state.rooms.amenities,i get an error saying imageFile is not defined. imageFile is not loaded so it might be saying not defined.

Answer 1

This is not React specific, it's just plain javascript. The let keyword defines a block-scoped variable, ie it only exists in the if statement where it resides. If you want it to be available elsewhere, you should define it outside of the 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
}

Since the first if statement checks for a property of the second one, I would prefer rationalizing it like:

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

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