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

【问题标题】：Click on Link to show details of item - ReactJs, Node.js单击链接以显示项目的详细信息 - ReactJs、Node.js
【发布时间】：2019-11-09 11:21:33
【问题描述】：

应用在 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

【问题讨论】：

标签： javascript node.js reactjs

【解决方案1】：

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

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

改用这个

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

【讨论】：

我更改了它，现在错误是例如标题未定义。 Uncaught TypeError: Cannot read property 'title' of undefined
是的，因为您的道具不包含标题。
啊哈好吧，所以我通过它的 ID 选择房间，像这样<Link to {"/view/"+props.room._id}>View</Link>，我如何访问 rom 作为对象？要访问所有其他详细信息？
通过这个你将它重定向到路由视图/房间ID。检查这个问题stackoverflow.com/q/45598854/11654882