React表中的嵌套对象数组

Question

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

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

Answer 1

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

您需要使用

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

Answer 2

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