我试图在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>
      );
})}

10-05 21:02
查看更多