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

问题描述

我有点卡在这里，所以基本上问题出在嵌套地图功能上。我有主地图功能，它为我提供了曾经添加到数据库中的所有酒店的列表。在该地图功能中，我必须有一个指定酒店的嵌套评论地图，但是问题在于相同的键。在主地图功能中，我有 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.”&quot;,
        "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"
        }
    }
]

标签： javascriptreactjsreact-reduxjsx

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

问题描述

解决方案

推荐阅读