Вложенный массив объектов в таблице 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>

Моя таблица отображается и e.invoice отображается правильно, однако я получаю сообщение об ошибке «Не удается отобразить ошибки неопределенных».

Answer 1

Это потому, что ваши сообщения не являются объектами javascript, а массивом

Вам нужно использовать

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

Answer 2

{e.errors.map(error => { - правильная цепь.