React表中的嵌套对象数组

时间:2019-05-07 19:43:43

标签: javascript arrays json reactjs html-table

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

我的表已呈现并且电子发票显示正确,但是出现“无法映射未定义的错误”错误。

2 个答案:

答案 0 :(得分:2)

这是因为您的消息不是javascript对象,而是一个数组

您需要使用

{e.errors.map(item => {
     return (
      <td>
       <ul>{item.Message}</ul>
      </td>
      );
})}

答案 1 :(得分:1)

{e.errors.map(error => {是正确的链。