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

Question

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

我的代码在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

我无法弄清如何动态显示数据（并且还要添加来自格式部分的数据）。我将非常感激任何建议和帮助，谢谢。

- nika

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

就这样了。哦，这里是沙盒链接。

- codemonkey

---

就我个人而言，我不喜欢这种“技巧”。你应该先对数据进行规范化处理。 - Nguyễn Văn Phong

@Phong 你已经发布了一种涉及规范化的方法。你是否希望我重新发布你的答案？我只是想提供一个不同的解决方案。 - codemonkey

好的，这很有道理，你的技巧是另一种选择。但是我认为规范化数据有很多方法 :D。 - Nguyễn Văn Phong

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;

- praga2050

---

你的解决方案太复杂了。必须使用太多第三方库而不知道背后的意义。==> 对于你的逻辑思维来说太糟糕了。 - Nguyễn Văn Phong

首先，您的数据和结构与OP无关。其次，您应该解释答案中涉及的一些部分。这让我很难理解 :( - Nguyễn Văn Phong

Answer 3

根本问题是，将您的数据从平面数据规范化为动态/聚合数据，通过水平键和值来构建以下结构。

[
  {
    "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演示

- Nguyễn Văn Phong

---

您好，抱歉打扰了，我有一个额外的问题，您能帮我解决一下吗？实际上，我忘记将id添加到数据中，现在我需要为每个<td>元素添加id。我已经更新了带有id的CodeSandbox链接https://codesandbox.io/s/compassionate-rain-7o2v2。非常感谢您的帮助，谢谢。 - nika

哦，我现在很忙。我会尽快回复你的，兄弟。也许明天早上吧 ^^！ - Nguyễn Văn Phong

嗨 @nika，你想展示什么新的结构、期望的数据/结果？ - Nguyễn Văn Phong

如果您期望的结果是 this，您只需要在代码中添加 createOrEdit(acc, "id", curr.id);。 - Nguyễn Văn Phong

你好，感谢您的回复。不，我想要在<td>单元格中添加ID，就像<td id={id}>值</td>。虽然我不确定这是否可行。 - nika