映射函数在对象反应中不能正常工作

Question

我有一个数组，包含如下所示。我已经成功地映射了数据并将其放入元素中。但是有一些价值观我不能正确地得到。我添加了一个console.log来计算数据。数据在数组中是正确的，我想在这里获得座位("A1，B1")，但是没有显示什么。感谢你的帮助。

数据阵列

"data": {
    "userBookings": [
      {
        "transactionId": 6357604,
        "totalAmount": 350,
        "createdAt": "2021-08-05 02:16:48",
        "movieName": "Mortal Kombat",
        "theaterName": "XxX Cinema",
        "showTime": "17:30",
        "refcode": "0016048GIN210805I",
        "bookedSeats": [
          {
            "seatType": "Comfert",
            "seats": "A1,B1",
            "childTickets": 1,
            "totalTickets": 2,
            "bookedDate": "2021-08-05"
          }
        ]
      }
    ]
  },

代码

<div className="col-xl-5 col-lg-5 col-md-7 col-sm-7 col-xs-9 col-6" style={{paddingLeft:25}}>
<h5><b>{bookingsData.movieName}</b></h5>
<h5>{bookingsData.theaterName}</h5>
<h5><small>{bookingsData.showTime}</small></h5>

{bookingsData.bookedSeats.map((seatNos) => {
  console.log(seatNos.seats);
   <h5><small>{seatNos.seats}</small></h5>
})}                               
{/* <h5><small>{bookingsData.bookedSeats.seats}</small></h5> */}
</div> 

Answer 1

您需要在map中返回元素，并为该元素设置key：

{bookingsData.bookedSeats.map((seatNos, index) => {
  console.log(seatNos.seats);
   return <h5 key={index}><small>{seatNos.seats}</small></h5>
})}  

Answer 2

.map()中的箭头函数不返回值。在JSX之前，您需要一个return：

{bookingsData.bookedSeats.map((seatNos) => {
  console.log(seatNos.seats);
  return <h5><small>{seatNos.seats}</small></h5>
})}  

或使用隐式返回箭头函数语法(圆括号或无括号：() => ()或() => returnedValue)

{bookingsData.bookedSeats.map((seatNos) => <h5>
  <small>{seatNos.seats}</small>
</h5>)}  

Answer 3

这是因为你忘了退货

 array.map((item) => {
      return (
        <p>{item.value}</p>
      )
    })