javascript - 我怎样才能显示图像数组？

Question

我有一个 React 页面，其中使用 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

这不是 React 特有的，它只是简单的 javascript。 let 关键字定义 block 作用域变量，即它仅存在于其所在的 if 语句中。如果您希望它在其他地方可用，您应该在 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 语句检查第二个 if 语句的属性，我更愿意将其合理化，如下所示:

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

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