如何解决React:如何从 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 中显示值,但它们看起来像这样:
所以看起来我的桌子被调换了。我想知道如何恢复它,而不是将每个索引的值显示为行,而是显示为列
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)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。