如何从API React表中创建动态标头

Question

如何根据API响应为我的React表创建标头？

例如，我不想为表手动定义列的数据，因此如何从对象的键中动态创建标题，

let testData = [

{
  "id": "1",

  "name": "test",
  "namespace": "test",
  "description": "test",
},
{
  "id": "2",
  "name": "test2",
  "namespace": "test2",
  "description": "test2",
} ]

请参见下面的答案

Answer 1

通常，您想使表标头静态，因为您无法控制返回端点的内容。一种方法可能是：

const App = () => {
  let testData = [

    {
      "id": "1",
    
      "name": "test",
      "namespace": "test",
      "description": "test",
    },
    {
      "id": "2",
      "name": "test2",
      "namespace": "test2",
      "description": "test2",
    } ]

  let headers = Object.keys(testData[0]);
  return <table>
    <thead>
      <tr>
       {
         headers.map(header => {
          return <th>{header}</th>
        })
        }
      </tr>
    </thead>
    <tbody>
      { 
        testData.map(({id, name, namespace, description}) => {
          return <tr>
            <td>{id}</td>
            <td>{name}</td>
            <td>{namespace}</td>
            <td>{description}</td>
        </tr>
      })
      }
      
    </tbody>
  </table> 
}

您也可以应用相同的逻辑以避免手动插入身体。

Answer 2

我能够为此

let testData = [

{
  "id": "1",

  "name": "test",
  "namespace": "test",
  "description": "test",
},
{
  "id": "2",
  "name": "test2",
  "namespace": "test2",
  "description": "test2",
} ]

//

let columns = Object.keys(testData[0]).map(key =>{

return {
//set header and accessor

Header: key,
accessor: key

}

})

提出

  <Table data={tableData} columns={columns} />

一个解决方案基于数据而不是手动定义标题。