Javascript 无法在reactjs中使用map显示列表项？

我有一个用户列表，其中包含每个用户的姓名和电子邮件id。我想使用

userlist

状态变量上的

.map（）

方法显示它。我已经创建了

displayusers（）

函数来显示用户，但编译失败

代码：

import React，{Component}来自'React'；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户列表：[
{'name'：'Rohan Singh'，
“电子邮件”：rohan@gmail.com'
},
{'name'：'Mohan Singh'，
“电子邮件”：mohan@gmail.com'
},
{'name'：'Rakesh Roy'，
“电子邮件”：rakesh@gmail.com'
},
{'name'：'Sunil Shah'，
“电子邮件”：sunil@gmail.com'
}]
}
}
displayusers（）{
返回此.state.userlist.map（用户=>{
返回(
用户名：{user.name}
电子邮件：{user.Email}
);
})
}
render（）{
返回(
使用者
{this.displayusers（）}
);
}
}
导出默认应用程序；

您需要将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'
      }]
  };

  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;

import React，{Component}来自'React'；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户列表：[
{'name'：'Rohan Singh'，
“电子邮件”：rohan@gmail.com'
},
{'name'：'Mohan Singh'，
“电子邮件”：mohan@gmail.com'
},
{'name'：'Rakesh Roy'，
“电子邮件”：rakesh@gmail.com'
},
{'name'：'Sunil Shah'，
“电子邮件”：sunil@gmail.com'
}]
};
this.displayusers=this.displayusers.bind（this）；//您需要添加此行
}
displayusers（）{
返回此.state.userlist.map（（用户，索引）=>{
返回(
用户名：{user.name}
电子邮件：{user.Email}
);
})
}
render（）{
返回(
使用者
{this.displayusers（）}
);
}
}
导出默认应用程序；

我想你忘了给元素添加一个

键

属性，你的map函数中缺少了

结束标记

请参阅更正的代码：

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>
        );
    });
}

displayusers（）{
返回此.state.userlist.map（用户=>{
返回(
用户名：{user.name}
电子邮件：{user.Email}
);
});
}

返回jsx的displayUsers函数缺少结束标记。我认为这是错误的答案。此处不需要绑定。为什么在使用当前上下文调用函数时需要绑定上下文？是的，我认为此处不需要“bind”。尽管建议使用key，但它不是必需的，问题似乎在于关门div@UmairAbid我通过添加

@stonerock编辑了我的问题。添加缺少的

时，它是否修复了错误？

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>
        );
    });
}