如何在Reactjs中使用Array.map格式化和显示JSON数据? [英] How to format and display JSON data using Array.map in Reactjs?
问题描述
我正在尝试显示存储为 userList
状态变量的数据.我正在尝试对每个对象进行 map
映射,并显示每个对象的 name
和 email
参数,但是在网页上我什么都看不到使用 console.log()
进行数据处理.我正在使用 displayUsers()
显示用户,并使用 getAllUser()
从API端点获取数据.我认为我的 displayUsers()
函数是错误的.代码:
I am trying to display data which is stored as userList
state variable. I am trying to map
each object and display name
and email
parameter from each object but it does not display anything on web page I can only see the data using console.log()
. I am displaying Users using displayUsers()
and getting data from API endpoint using getAllUser()
.
I think my displayUsers()
function is wrong.
Code:
import React, { Component } from 'react';
import axios, { post } from 'axios';
class App extends Component {
constructor(props){
super(props);
this.state = {
userList:[]
}
}
ComponentDidMount(){
if(window.sessionStorage.getItem("ud") !== null){
var _userData = JSON.parse(window.sessionStorage.getItem("ud"));
this.userDetails = _userData;
}
this.getAllUser();
}
getAllUser(){
axios({
method:"GET",
url:"http://62.210.93.54:6010/api/getAllUser",
auth:{
username:this.userDetails.email,
password:this.userDetails.password
}
}).then((response)=>{
console.log(response.data);
this.setState({
userList:response.data.results
})
})
}
displayUsers(){
return this.state.userList.map( user => {
return(
<div className="item-card">
<div className="info">
<div className="username">Username: {user.name}</div>
</div>
<div className="del-wrap">
<img src={require("../../images/cancel.svg")}/>
</div>
</div>
);
})
}
render() {
return(
<div className="users-wrap">
<h1>Users</h1>
<div className="task-content">
<div className="user-wrap">
<div className="users">
<div className="item-card add">
<img src={require("../../images/plus.svg")} className="plus-icon" />
<div className="lbl">Add a new User</div>
</div>
{this.displayUsers()}
</div>
</div>
</div>
</div>
);
}
}
export default App;
模型架构:
{
"results": [
{
"createdBy": null,
"updatedBy": "Ankit",
"createdDate": 1523892363509,
"updatedDate": 1524066767311,
"id": "5ad4c1964417fc66067b29cf",
"userName": "admin",
"email": "ankit@woocation.com",
"roles": [
"USER"
]
},
{
"createdBy": null,
"updatedBy": null,
"createdDate": 1523971940177,
"updatedDate": 1523971940177,
"id": "5ad5f7640ff4ec580b885a2e",
"userName": "varun",
"email": "varun@woocation.com",
"roles": [
"ADMIN"
]
},
{
"createdBy": null,
"updatedBy": null,
"createdDate": 1524302563169,
"updatedDate": 1524302563169,
"id": "5adb02e30ff4ec53076ffbb7",
"userName": "Rahul",
"email": "rahul@woocation.com",
"roles": [
"admin"
]
},
{
"createdBy": null,
"updatedBy": null,
"createdDate": 1524303894654,
"updatedDate": 1524303894654,
"id": "5adb08160ff4ec53076ffbbb",
"userName": "Nandita",
"email": "nandita@woocation.com",
"roles": [
"member"
]
},
{
"createdBy": null,
"updatedBy": null,
"createdDate": 1524308787960,
"updatedDate": 1524308787960,
"id": "5adb1b330ff4ec53076ffbc2",
"userName": "user",
"email": "user@woocation.com",
"roles": [
"USER"
]
},
{
"createdBy": null,
"updatedBy": null,
"createdDate": 1524327504461,
"updatedDate": 1524327504461,
"id": "5adb64500ff4ec53076ffbc4",
"userName": "Rinku",
"email": "test@woocation.com",
"roles": [
"admin"
]
}
],
"httpStatus": "OK",
"message": "All Users response"
}
推荐答案
根据您的模型架构,您的用户对象包含 userName
和 not name
,因此您可以在 displayUsers
方法中写入 user.userName
,而且密钥参数对性能优化很有帮助,您应该在由以下代码返回的元素上添加唯一的密钥迭代器
As per your model schema, your user object contains userName
and not name
, so you would write user.userName
in your displayUsers
method, Also a key param is helpful in performance optimisation and you should add a unique key on the element returned by the iterator
displayUsers(){
return this.state.userList.map( user => {
return(
<div className="item-card" key={user.id}>
<div className="info">
<div className="username">Username: {user.userName}</div>
</div>
<div className="del-wrap">
<img src={require("../../images/cancel.svg")}/>
</div>
</div>
);
})
}
这篇关于如何在Reactjs中使用Array.map格式化和显示JSON数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!