使用地图 API 中的键渲染 JSON 数据

Question

我从我的 api 获取数据，JSON 是：

{
  Teacher: 53, 
  Student: 0,
  Staff: 1, 
  Finance: 0, 
}

当组件挂载时，我的数据存储在我的状态中所以 this.total.users 包含我的 JSON 数据

呈现此内容的最佳方式是什么？

我知道它是 JSON 带钥匙的，所以我应该使用

 {Object.keys(this.state.users).map((key) => (   
   <div> {key} </div>   // display Attendee, Student, Staff, Finance
 )}

但它不起作用，因为 this.state.users 未定义所以我发现我可以显示我的整个 JSON 对象，它适用于

 JSON.stringify(this.state.users)}

所以我想我必须混合使用它们，但是如何以及何时？我有点迷路了。

最后我只想让我的 JSON 显示为：

Attendee   Student   Staff   Finance
   53         0        1        0

Answer 1

您可以执行如下操作

在执行 Object.keys 之前进行条件检查，这样当 this.state.users 未定义时不会有任何问题
使用key获取值，如this.state.user[key]

将唯一键设置为 div 这样您将呈现所有用户，否则只会呈现最后一个

{this.state.users && JSON.stringify(this.state.users, Object.keys(this.state.users).map((key, index) => (   
      <div key={'Key-'+index}>
          <div> {key} </div>   // display Attendee, Student, Staff, Finance
           <div>{this.state.users[key]</div> //this will give you value
       </div>
  )))}

使用地图 API 中的键渲染 JSON 数据

Render JSON data with keys from an API using map

dictionary

render

stringify

reactjs