无法映射对象?无法读取未定义的属性“map”
2021-07-15
108
所以我目前正在为我的 POS 应用制作收据。
我目前已将数组存储为: mongodb 集合
我想将它们映射到收据页面
function renderTable(orderlist) {
return (
<tr className='service'>
<td className='tableitem'>
<p className='itemtext'>{orderlist.name}</p>
</td>
<td className='tableitem'>
<p className='itemtext'>{orderlist.qty}</p>
</td>
<td className='tableitem'>
<p className='itemtext'>{orderlist.subtotal}</p>
</td>
</tr>
);
}
const showReceipt = ({
values,
errors,
touched,
handleChange,
handleSubmit,
isSubmitting,
}) => {
return (
<div id='bot'>
<div id='table'>
<table>
<tbody>
<tr className='tabletitle'>
<td className='item'>
<h2>Item</h2>
</td>
<td className='Hours'>
<h2>Qty</h2>
</td>
</tr>
{values.order_list.map((orders) => {
renderTable(orders.order_list);
})}
<tr className='tabletitle'>
<td />
<td className='Rate'>
<h2>tax</h2>
</td>
<td className='payment'>
<h2>$419.25</h2>
</td>
</tr>
<tr className='tabletitle'>
<td />
<td className='Rate'>
<h2>Total</h2>
</td>
<td className='payment'>
<h2>{values.total}</h2>
</td>
</tr>
</tbody>
</table>
</div>
<div id='legalcopy'>
{/* <p className='legal'>
<strong>Thank you for your business!</strong> Payment is
expected within 31 days; please process this invoice within that
time. There will be a 5% interest charge per month on late invoices.
</p> */}
</div>
</div>
);
目前它显示此错误:
TypeError: Cannot read property 'map' of undefined
由于某种原因,我无法映射这个特定对象。
但是,我可以使用以下方式将它们作为字符串返回: JSON.Stringify(orderlist)
我也可以将对象记录在 控制台
无论出于什么原因,我都无法映射它们。我希望该函数为每个 Order_list 内容返回一行
2个回答
在出现这些问题的情况下,99% 的时间里,您的
values
在某个时间点可用,但由于您是从 api 获取它们,这需要时间,因此在第一次渲染时无法获取。
在映射之前,请检查
values
是否已设置,否则显示加载指示器。
phry
2021-07-15
当您调用 api 时。
values.order_list
是您在 Reducer 上定义的初始值。因此,如果您未定义
order_list
的初始值,则
values.order_list
未定义。您可以使用可选链在调用映射之前进行检查,如下所示。
values.order_list?.map
Viet
2021-07-15