如何连接容器内的嵌套地图功能？

Question

我有点卡在这里，所以基本上问题出在嵌套地图功能上。 我有主地图功能，它为我提供了曾经添加到数据库中的所有酒店的列表。 在该地图功能中，我必须有一个指定酒店的嵌套评论地图，但问题是 用相同的键。在主地图功能中，我有 id、name 等键。至于嵌套评论地图，我有 id，这与主地图中提供的 id 基本不同，所以我在尝试连接它们时被卡住了。

这是我的代码：

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

Answer 1

最好将其拆分为不同的组件（例如Hotel）。有了它，您可以为酒店和评论使用不同的键 - 您可以保留当前的酒店 id，同时在 Hotel 组件中使用 id 进行评论。

Answer 2

可能缺少有关 ReviewsArray 的某些信息：Hotels 的“外键”。比如：

[
    {
        "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
    }
]

而且，通过这种方式，您可以在 map 之前过滤列表：

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

如果我正确理解了您的问题，那么在没有此类信息的情况下，很难知道正在评价的酒店。可能此信息存在，但隐藏在其他信息中。