尝试使用地图在反应组件中显示键/值对？

Posted 2023-03-05

【中文标题】尝试使用地图在反应组件中显示键/值对？

【英文标题】：Trying to display key/value pairs in react component using map?

【发布时间】：2022-01-23 07:51:34

【问题描述】：

我有从后端返回的数据，我想用下面的方法在反应组件中显示它只打印值，我如何在 DOM 中打印键和值。

index.js

 Object.entries(data).map(([key, value]) => (
                 <Card>
                 <CardContent>
                   <Typography variant="body2" color="text.secondary">
                   <p>data[key]</p>
                   <p>data[value]</p>
                   </Typography>
                 </CardContent>
               </Card>
              )) 

数据样本

 'User': ': Admin',
'Location': ': New York, NY',
'Company Name': ': Millenium'

【参考方案1】：

只需使用key 代替data[key] 和value 代替data[value]。此外，请务必在列表中的每个 mapped 项目上使用 provide a unique key。

Object.entries(data).map(([key, value]) => (
  <Card key=key>
    <CardContent>
      <Typography variant="body2" color="text.secondary">
        <p>key</p>
        <p>value</p>
      </Typography>
    </CardContent>
  </Card>
))