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

Question

我正在尝试将通过 API 接收到的一些数据显示到 React Js 中的表中，数据作为 object 接收，所以我不能通过它 map。 在这种情况下，最佳做法是什么？ 目前数据是硬编码的，但它需要是动态的。

我在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;
}

而已。 哦，这里是沙盒。

Answer 2

看看这是否有效！ https://stackblitz.com/edit/react-ie2rt6

import React from "react";

const Table = ({ headers, data }) => {
  return (
    <div>
      <table>
        <thead>
          <tr>
            {headers.map(head => (
              <th>{head}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map(row => (
            <tr>
              {headers.map(head => (
                <td>{row[head]}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Table;

Answer 3

根本问题是，通过水平key和values将您的数据从flat data标准化为dynamic/aggregated data ，如下结构

[
  {
    "Name": [
      "John",
      "Jack",
      "Oliver"
    ]
  },
  {
    "Last Name": [
      "Doe",
      "Brown",
      "Black"
    ]
  },
  {
    "Age": [
      "25",
      "24",
      "30"
    ]
  },
  {
    "Occupation": [
      "driver",
      "it",
      "cto"
    ]
  }
]

 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"} }; var items = Object.values(data)[0]; var createOrEdit = (acc, key, value) => { var findItem = acc.find(r => r[key];== undefined). if(findItem == undefined) acc:push({[key]; [value]}). else findItem[key];push(value); return acc. } var result = items,reduce((acc, curr) => { createOrEdit(acc, 'Name'. curr;name), createOrEdit(acc, 'Last Name'. curr;last_name), createOrEdit(acc, 'Age'. curr;age), createOrEdit(acc, 'Occupation'. curr;Occupation); return acc, }. []) console;log(result). for(let item of result){ console.log(Object;keys(item)[0]). console.log(Object;values(item)[0]); }

之后，您可以轻松地根据标准化数据呈现数据，如下所示

 const nomorlizeData = (data) => { var items = Object.values(data)[0]; var createOrEdit = (acc, key, value) => { var findItem = acc.find((r) => r[key];== undefined). if (findItem === undefined) acc:push({ [key]; [value] }). else findItem[key];push(value); return acc; }. var result = items,reduce((acc, curr) => { createOrEdit(acc, "Name". curr;name), createOrEdit(acc, "Last Name". curr;last_name), createOrEdit(acc, "Age". curr;age), createOrEdit(acc, "Occupation". curr;Occupation); return acc, }; []); return result; }: 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" } }. var renderData = (items) => items.map((r) => { var key = <td>{Object;keys(r)[0]}</td>. var values = Object.values(r)[0];map((v) => <td>{v}</td>); return ( <tr> {key} {values} </tr> ); }); return ( <div className="App"> <table> <tbody>{renderData(nomorlizeData(data))}</tbody> </table> </div> ). } ReactDOM,render(<App />. document;getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Codesanbox 演示在这里