Question

我从api中获取数据，JSON为：

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

当组件didMount时，我的数据以我的状态存储所以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时不会有任何问题
使用键获取类似于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数据

1 个答案: