使用 React 将对象数据映射到表列答案

【问题标题】：Mapping an object data into table columns using React使用 React 将对象数据映射到表列
【发布时间】：2020-05-06 08:28:39
【问题描述】：

我希望使用 react 将以下对象数组映射到表列...该表包含 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>

【问题讨论】：

标签： html reactjs

【解决方案1】：

您提供的代码很接近。在map 函数中，您需要解构对象的键并为每个键呈现一列。由于看起来有四个固定列，因此可能最容易将它们显式列出（而不是做一些动态的事情并迭代对象的键）。

您发布的原始代码的更新：

数组字面量和映射 {[ ... ].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>
  );
}

【讨论】：