反应映射渲染问题答案

【问题标题】：React mapping rendering issue反应映射渲染问题
【发布时间】：2021-04-13 18:27:24
【问题描述】：

我遇到了一个非常令人困惑的问题，我想知道是否有人可以提供帮助。我将对象作为数组映射到一些 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>
    );
}

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

【问题讨论】：

我会确保你发布完整的反应组件，因为不清楚你是否正在渲染这个对象。你可能只是在迭代它。

标签： javascript reactjs rendering array.prototype.map

【解决方案1】：

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

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

【讨论】：