反应映射渲染问题

Question

我有一个非常困惑的问题，我想知道是否有人可以提供帮助。我将对象作为数组映射到一些 html(/jsx) 中。对象未渲染。但奇怪的是，在调试器中它确实显示每个值都归因于 html 中的插入——但它没有呈现。有什么想法吗？

下图是 reservations 数组中的一个对象在调试器中显示为映射的示例，而渲染实际上保持为第二张图片。

axios http 请求，在与另一个请求的承诺中：

const getReservations = 
   axios
      .get(`${api_url}/reservations`, {
          headers: {
              'Authorization': `Bearer ${sessionStorage.token}`
          }
       })
       .then((res) => {
           setReservations(reservations => ([...reservations, ...res.data]));
       })
        
const getRoomTypes = 
   axios
       .get(`${api_url}/room-types`, {
           headers: {
               'Access-Control-Allow-Origin': `${ui_url}`,
               'Authorization': `Bearer ${sessionStorage.token}`
           }
       })
       .then((res) => {
           setRoomTypes(roomTypes => ([...roomTypes, ...res.data]));
       })
        
Promise.all([getReservations, getRoomTypes])
    .catch(() => { 
         setError(connectionError);
    });

}, []);

将数据传递给呈现的组件：

return (
   <div>
     <h2>Reservations</h2>
     <Link className="button" to="/reservations/create">Create</Link>
     <br />
     <br />
     <ReservationDiv error={error} resData={reservations} />
   </div>
);

呈现对象的组件：

const ReservationDiv = (props) => {
    
    const reservations = props.resData;

    const renderTableData = () => {
        reservations.map((reservation) => {
            const { id, user, guestEmail, roomTypeId, checkInDate, 
                    numberOfNights } = reservation;
            
    return (
       <tr key={id}>
          <td className="res">{id}</td>
          <td className="user">{user}</td>
          <td className="email">{guestEmail}</td>
          <td className="room">{roomTypeId}</td>
          <td className="date">{checkInDate}</td>
          <td className="nights">{numberOfNights}</td>
       </tr>
      );
  });
}

   return (
       <table>
           <tbody>
               <tr>
                   <th>ID</th>
                   <th>Input by</th>
                   <th>Guest Email</th>
                   <th>Room Type</th>
                   <th>Check-in Date</th>
                   <th># of Nights</th>
                   <th>Total</th>
                </tr>
                {renderTableData()}
            </tbody>
        </table>
    );
}

我也可以提供引用的代码，但我认为问题似乎更根本，因为它是事物的表示与事物本身之间的差异

Answer 1

您需要return JSX 对象的映射数组

const renderTableData = () => {
    return reservations.map((reservation) => {
//...

反应映射渲染问题

React mapping rendering issue

javascript

reactjs

rendering

array.prototype.map