如何在容器内连接嵌套的地图函数？

如何解决如何在容器内连接嵌套的地图函数？

我有点卡在这里，所以基本上问题出在嵌套地图功能上。 我有主地图功能，可为我提供曾经添加到数据库中的所有酒店的列表。 在该地图功能内，我必须具有指定酒店的评论的嵌套地图，但是问题是 用相同的键。在主地图功能中，我有诸如ID，名称之类的键。至于嵌套的评论地图，我有ID，它与主地图中提供的ID基本不同，因此在尝试连接它们时会卡住。 / p>

这是我的代码：

<div>
            <div className='landing-container'>
                <nav>
                    <h2>Hotel Challenge</h2>
                    <ul>
                        <li><a className="nav-link" onClick={loadHotels}>List All Hotels</a></li>
                        <li><Link className='nav-link' to='/dashboard'>Dashboard</Link></li>
                        <li><Link className='nav-link' to='/favorites'>Favorites</Link></li>
                        <li><a className="nav-link" onClick={handleLogout}>Logout</a></li>
                    </ul>
                </nav>
            </div>
            <div className="layout-container">
                <div>{hotelItems.map((item) => (
                    <div className="hotel-container" key={item.id}>
                        <div className="hotel-name">
                            {item.name}
                            <div className="hotel-location">{item.city},{item.country}</div>
                            <div className="hotel-stars">
                                {Array(item.stars).fill(<FontAwesomeIcon className="icon-color-star" icon={faStar} />)}
                            </div>
                            <img className="hotel-image" src={item.image} />
                            <div className="reviews">
                                <button className="review-button" onClick={showHotelReviews}>Show Reviews</button>
                                {hotelReviews.map((review) => (
                                    <div>
                                        <div className="review-message">{review.id}</div>
                                        <div className="review-likes">Liked by: <span>{review.likes}</span><sup><FontAwesomeIcon className="icon-color-likes" icon={faHeart} /></sup></div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                ))}</div>
            </div>
        </div>

我尝试将主地图关键字提供给嵌套地图，但这也不起作用。

数组中的所有酒店：

[
    {
        "id": 42,"name": "Courtyard by Marriott Belgrade City Center","city": "Belgrade","country": "Serbia","image": "http://127.0.0.1:8000/media/images/54129602.jpg","stars": 4,"date": "2017-11-15 00:03:32","description": "Lorem Ipsum","price": 52.0,"likes": 45,"dislikes": 2,"user": [
            1,73
        ],"location": "44.8170754,20.4580087"
    },]

评论数组：

[
    {
        "id": 1,"message": "“Very comfortable.”","created_at": "2020-08-13T18:10:56.240421Z","likes": 5,"dislikes": 0,"positive": true,"author": {
            "id": 1,"first_name": "First Name","last_name": "Last Name"
        }
    }
]

解决方法

最好将其拆分为不同的组件（类似于Hotel）。这样，您就可以为酒店和评论使用不同的密钥-您可以保留酒店的当前ID，而在Hotel组件中将ID用于评论。

,

可能缺少有关ReviewsArray的某些信息：酒店的“外键”。像这样：

[
    {
        "id": 1,"message": "“Very comfortable.”","created_at": "2020-08-13T18:10:56.240421Z","likes": 5,"dislikes": 0,"positive": true,"author": {
             "id": 1,"first_name": "First Name","last_name": "Last Name"
        },"hotel_id": id <------ "foreign key" id here
    }
]

通过这种方式，您可以在地图之前过滤列表：

hotelReviews.filter((review) => review.hotel_id == item.id).map((review) => (code here))

如果我正确地理解了您的问题，那么在没有此类信息的情况下，很难对正在接受审核的酒店进行了解。也许此信息存在，但被其他信息掩盖了。