我试图在React中的表中呈现以下数据结构。
但是,我一直遇到一个不确定的问题,即获取“错误”嵌套数组。
我的数据如下:
const messages= [
{ invoice: "81", errors: [{ Message: "Invoice # must be unique." }] },
{ invoice: "82", errors: [{ Message: "Invoice # must be unique." },
{ Message: "No total amount." }]},
{ invoice: "85", errors: [{ Message: "Invoice # must be unique." }] }
];
我的React表如下:
<table>
<thead>
<tr>
<th>Invoice</th>
<th>Errors</th>
</tr>
</thead>
{messages.map(e => {
return (
<tbody>
<tr>
<td>{e.invoice}</td>
{messages.errors.map(e => {
return (
<td>
<ul>{e.errors}</ul>
</td>
);
})}
</tr>
</tbody>
);
})}
</table>
我的表已呈现,并且e.invoice正确显示,但是我收到“无法映射未定义的错误”错误。
最佳答案
这是因为您的消息不是javascript对象,而是数组
您需要使用
{e.errors.map(item => {
return (
<td>
<ul>{item.Message}</ul>
</td>
);
})}