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

Question

我有一个用户列表，其中包含每个用户的姓名和电子邮件 ID。我想在 userlist 状态变量上使用 .map() 方法显示它。我已经创建了 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;

Answer 1

我想你忘了添加 key元素的属性，缺少 </div> 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>
        );
    });
}