如何在React Js中将数据显示到表格中？

Question

我试图将通过 API 接收到的一些数据显示到 React Js 中的表中，数据是作为对象接收的，所以我无法通过它进行映射。在这种情况下，最佳做法是什么？目前数据是硬编码的，但它需要是动态的。

我在CodeSandbox中的代码

export default function App() {

  const data ={
    
    "people" :[
      {
        "name":"John",
        "last_name":"Doe",
        "age":"25",
        "Occupation":"driver",
      },
      {
        "name":"Jack",
        "last_name":"Brown",
        "age":"24",
        "Occupation":"it"
      },
      {
        "name":"Oliver",
        "last_name":"Black",

        "age":"30",
        "Occupation":"cto"
      },
    ],

    "format":{"last_name":"Last Name"}
  }
  
  return (
    <div className="App">
     <table>
       <tbody>
         <tr>
           <td>Name</td>
           <td>John</td>
           <td>Jack</td>
           <td>Oliver</td>
           
         </tr>
         <tr>
           <td>Last Name</td>
           <td>Doe</td>
           <td>Brown</td>
           <td>Black</td>
           
         </tr>
         <tr>
           <td>Age</td>
           <td>25</td>
           <td>24</td>
           <td>30</td>
           
         </tr>
         <tr>
           <td>Occupation</td>
           <td>driver</td>
           <td>it</td>
           <td>ceo</td>
         </tr>

         
       </tbody>
     </table>
    </div>
  );
}

需要显示为

Name         John     Jack      Oliver
Last Name    Doe      Brown     Black
Age          25       24        30
Occupation   driver   it        ceo

我不知道如何动态显示数据（以及从格式部分添加数据。我将不胜感激任何建议和帮助，谢谢。

Answer 1

我的方法有点非正统，但您可能仍然感兴趣。我实际上会首先像这样渲染你的数据：

Name    Last Name   Age Occupation
John    Doe         25  driver
Jack    Brown       24  it
Oliver  Black       30  cto

然后简单地使用 CSS 来转置它，这将给它你想要的外观：

Name         John     Jack      Oliver
Last Name    Doe      Brown     Black
Age          25       24        30
Occupation   driver   it        ceo

所以，渲染部分非常简单：

    <tbody>
          <tr>
            <th>Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Occupation</th>
          </tr>
          {data.people.map((item, i) => (
            <tr key={i}>
              <td>{item.name}</td>
              <td>{item.last_name}</td>
              <td>{item.age}</td>
              <td>{item.Occupation}</td>
            </tr>
          ))}
    </tbody>

CSS 部分也是如此：

tr {
  display: block;
  float: left;
}
th,td {
  display: block;
  text-align: left;
  padding: 6px;
  border: 1px solid #ccc;
}

就是这样。哦，这里是沙箱。