Question

App正在Node.js和React上运行。在数据库（使用mongodb）中，我具有“房间”集合，其中包含有关特定房间的详细信息。

在LandingPage上，我显示了一些房间的详细信息，为了确保更多的人必须单击“查看”链接。

LandingPage.js

const Room = props => (

    <div className = "col-md-4" >
        <div className="card mb-4 shadow-sm">
            <img src={props.room.imageData} class="card-img-top" alt="..." width="100%" height="225" />
            <div className="card-body">
                <h5 class="card-title">{props.room.title}</h5>
                <p className="card-text">{props.room.description}</p>
                <div className="d-flex justify-content-between align-items-center">
                    <div className="btn-group">
                    <Link  className="btn btn-sm btn-outline-secondary" to={"/view/"+props.room._id}>View</Link>
                    </div>
                </div>
            </div>
        </div>
    </div >
)

链接将我发送至查看页面

<Link  className="btn btn-sm btn-outline-secondary" to={"/view/"+props.room._id}>View</Link>

但是我不确定现在如何显示数据库中所有房间的详细信息？

View.js

export default class RoomsAdmin extends React.Component {

    constructor(props) {
        super(props);
        this.state = { rooms: [] };
    }

    componentDidMount() {
        axios.get('http://localhost:3090/admin/')
            .then(response => {
                this.setState({
                    rooms: response.data
                })
                    .catch(function (error) {
                        console.log(error);
                    })
            })
    }

    roomList() {
        return this.state.rooms.map(function (currentRoom, i) {
            return <Room room={currentRoom} key={i} />
        });
    }
    render() {
        console.log(this.props);
        return (
            <div>
                <div className="album py-5 bg-light">
                    <div className="container">
                        <div className="row">
                            <div className="col-md-4">
                                <div className="card mb-4 shadow-sm">
                                    <img src={props.room.imageData} className="card-img-top" alt="..." width="100%" height="225" />
                                    <div className="card-body">
                                        <h5 class="card-title">{props.room.title}</h5>
                                        <p className="card-text">{props.room.description}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

我现在想出了这段代码，但出现以下错误：

Uncaught ReferenceError: props is not defined

Answer 1

是的，因为您在图像标签中编写的不是this.props。在RoomAdmin组件中

<img src={props.room.imageData} className="..../>

改为使用

<img src={this.props.room.imageData} className=".../>

单击链接以显示项目的详细信息-ReactJs，Node.js

1 个答案: