[英]React mapping rendering issue
我有一个非常令人困惑的问题,我想知道是否有人可以提供帮助。 我将对象作为 arrays 映射到一些 html(/jsx) 中。 对象未渲染。 但奇怪的是,在调试器中,它确实显示每个值都归因于 html 中的插入——但它没有呈现。 有任何想法吗?
下图是reservations
数组中的一个 object 的示例,在调试器中显示为映射,而渲染实际上保留为第二张图片。
axios
http 请求,在 promise 和另一个请求中:
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>
);
}
我也可以提供引用的代码,但我认为问题似乎是更根本的问题,因为它是事物的表示与事物本身之间的区别
您需要return
JSX 对象的映射数组
const renderTableData = () => {
return reservations.map((reservation) => {
//...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.