使用 React 以表格格式显示存储到数组中的 json 数据

Question

我已经配置了一个 react 网站来接收 json 数据并将其存储到一个数组中，其格式如附图中所示。我将如何以表格格式显示这些信息？json data stored in array

Answer 1

如果你不想使用属性名，你可以这样做：

import React, { Component } from "react";
import { render } from "react-dom";

const App = () => {
  const data = [
    { id: 0, value: "item 1" },
    { id: 1, value: "item 2" },
    { id: 2, value: "item 3" }
  ];
  const keys = Object.keys(data[0]);

  return (
    <div>
      <table>
        <thead>
          {keys.map(key => {
            return (
              <th>
                <td>{key}</td>
              </th>
            );
          })}
        </thead>
        <tbody>
          {data.map((item, index) => {
            return (
              <tr>
                {keys.map(key => (
                  <td>{item[key]}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

render(<App />, document.getElementById("root"));

请注意，您的所有项目都需要具有相同的属性（此处为“id”和“值”）才能正常工作。

这里是the repro on stackblitz

如果您需要更好的东西，那么您应该寻找为此制作的软件包，互联网上有很多。