Отображение данных объекта в столбцы таблицы с помощью React

Question

Я хочу, чтобы следующий массив объектов был отображен в столбцы таблицы с помощью response ... Таблица содержит 4 столбца, и эти значения должны быть сопоставлены в них ... а также есть две строки .....

 <table>
                <tbody>
                        [{
                            voucherCode: 'DC12',
                            product: 'TEST PRODUCT',
                            startDate:'10-05-2019',
                            endDate:'06-10-2019'
                        },
                        {
                            voucherCode: 'DC123',
                            product: 'TEST PRODUCT',
                            startDate:'10-05-2019',
                            endDate:'06-10-2019'
                        }
                        {/* ].map( ( {name, email} ) => {

                            return <td key={email}>{name} - {email}</td>
                        }) */}
                        ].map( ( {eBird, index} ) => {
                            return(
                                <tr>
                                    <td >{voucherCode} </td>
                                    </tr>

                            )


                        })


                </tbody> 
            </table>

Answer 1

Введенный вами код близок. В функции map вы захотите деструктурировать ключи объекта и отобразить столбец для каждого из них. Поскольку похоже, что есть четыре фиксированных столбца, вероятно, проще всего явно перечислить их (в отличие от выполнения чего-то динамического c и перебора ключей объекта).

Обновления исходного кода, которые вы размещено:

• Отсутствуют фигурные скобки вокруг литерала массива и карты {[ ... ].map()}.
• Закомментированный код заключен в фигурные скобки и недействителен. Поскольку он кажется неиспользованным, я бы предложил удалить его полностью.
• Обновлены разрушаемые значения, чтобы они соответствовали реальным объектам. eBird не определен ни в одном из объектов.

function Table() {
  return (
    <table>
      <tbody>
        {[
          {
            voucherCode: "DC12",
            product: "TEST PRODUCT",
            startDate: "10-05-2019",
            endDate: "06-10-2019"
          },
          {
            voucherCode: "DC123",
            product: "TEST PRODUCT",
            startDate: "10-05-2019",
            endDate: "06-10-2019"
          }
        ].map(({ voucherCode, product, startDate, endDate }) => {
          return (
            <tr>
              <td>{voucherCode}</td>
              <td>{product}</td>
              <td>{startDate}</td>
              <td>{endDate}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}