ReviewsArray可能缺少一些信息：；外键"；酒店。类似于：
我有点拘泥于此，所以基本上问题出在嵌套映射函数上。我有一个主要的地图功能，它为我提供了一个数据库中所有酒店的列表。在这个地图函数中，我必须有一个指定酒店的评论嵌套地图，但问题是使用相同的键。在main map函数中，我有id、name等键。至于嵌套的review map，我有id，这与main map中提供的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"
}
}
]
最好将其拆分为不同的组件(类似于Hotel(。这样，您就可以为酒店和评论使用不同的密钥——您可以保留酒店的当前id，同时在Hotel组件中使用评论id。
[
{
"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))
如果我正确理解你的问题，如果没有这类信息，很难知道被审查的酒店。也许这个信息存在，但被另一个信息掩盖了。