我有一个用户列表,其中包含每个用户的姓名和电子邮件ID。我想在.map()
状态变量上使用userlist
方法显示它。我创建了displayusers()
函数来显示用户,但是我没有编译错误。
代码:
import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props);
this.state = {
userlist:[
{'name':'Rohan Singh',
'email':'rohan@gmail.com'
},
{'name':'Mohan Singh',
'email':'mohan@gmail.com'
},
{'name':'Rakesh Roy',
'email':'rakesh@gmail.com'
},
{'name':'Sunil Shah',
'email':'sunil@gmail.com'
}]
}
}
displayusers(){
return this.state.userlist.map( user => {
return(
<div className="item-card">
<div className="sub">
<div className="type">Username: {user.name}</div>
<div className="members">Email: {user.email}</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">
{this.displayusers()}
</div>
</div>
</div>
</div>
);
}
}
export default App;
答案 0 :(得分:3)
我认为您忘了向元素添加key
属性,并且地图函数中缺少</div>
结束标记。
查看更正后的代码:
displayusers(){
return this.state.userlist.map( user => {
return(
<div className="item-card" key={user.name}>
<div className="sub">
<div className="type">Username: {user.name}</div>
<div className="members">Email: {user.email}</div>
</div>
<div className="del-wrap">
<img src={require("../../images/cancel.svg")}/>
</div>
</div>
);
});
}
答案 1 :(得分:0)
您需要将displayusers功能绑定到 this 。您可以在构造函数中执行此操作。
按以下方式更新您的代码:
import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props);
this.state = {
userlist:[
{'name':'Rohan Singh',
'email':'rohan@gmail.com'
},
{'name':'Mohan Singh',
'email':'mohan@gmail.com'
},
{'name':'Rakesh Roy',
'email':'rakesh@gmail.com'
},
{'name':'Sunil Shah',
'email':'sunil@gmail.com'
}]
};
this.displayusers = this.displayusers.bind(this); // you need to add this line
}
displayusers(){
return this.state.userlist.map((user, index) => {
return(
<div className="item-card" key={index}>
<div className="sub">
<div className="type">Username: {user.name}</div>
<div className="members">Email: {user.email}</div>
</div>
<div className="del-wrap">
<img src={require("../../images/cancel.svg")}/>
</div>
);
})
}
render() {
return(
<div className="users-wrap">
<h1>Users</h1>
<div className="task-content">
<div className="user-wrap">
<div className="users">
{this.displayusers()}
</div>
</div>
</div>
</div>
);
}
}
export default App;