React：如何从 api 调用中反转表

问题描述

我正在调用一个 api，这就是我得到的：

我希望能够将其显示为一个表，其中每个索引都是一列。所以我的理想结果是一个看起来像这样的表格：

#	分数	LCP	FCP	SI	..	..	TTB
1	0.25	3.7	7.9	14	..	..	0.65
2	0.23	3.7	7	11.4	..	..
3	0.20	4.3	6.4	9.4	..	..
4	0.22	3.9	7.1	11.6	..	..

目前我可以在 dom 中显示值，但它们看起来像这样：

所以看起来我的桌子被调换了。我想知道如何恢复它，而不是将每个索引的值显示为行，而是显示为列

这是我在dom中显示数据的代码：

render() {

const { urls = []} = this.state

....

{urls.length > 0 ? (
  <Table hover>
  <tr>
          <th>Test #</th>
          <th>score</th>
          <th>FCP</th>
          <th>SI</th>
          <th>LCP</th>
          <th>TTI</th>
          <th>TBT</th>
          <th>CLS</th>
        </tr>
      <tbody>
          {urls.map((kwsVal) => (
              <tr>
                  {Object.values(kwsVal).map((val) => (
                      <td>{val}</td>
                  ))}
              </tr>
          ))}
      </tbody>
  </Table>
) : <div>No data available</div>}

      

解决方法

您可以通过执行以下操作来转置数据：

let content = [{0: 0.25,1: 0.23,2: 0.2,3: 0.2266666667},{0: 3.7,1: 3.7,2: 4.3,3: 3.9},{0: 7.9,1: 7,2: 6.4,3: 7.1},{0: 14,1: 11.4,2: 9.4,3: 11.6},{0: 16.2,1: 16.6,2: 16.6,3: 16.4666666667},{0: 820,1: 1090,2: 1440,3: 1116.6666666667},{0: 0.065,1: 0.065,2: 0.065,3: 0.065}]

let rows = content.map((_,index) => {
    let columnValues = content.map(i => content[index][i])
  return columnValues
})

console.log(rows)