Question

嘿，我都有这个对象数组

this.state = {
        users :[{
            userid:'1',
            fullName :'eddyabikhalil',
            dob:'10/03/1994',
            gender:'M',
            loan:[{
                loanid:'1',
                date:'20/7/2012',
                loanValue:'100$',
            }, 

            {
                loanid:'2',
                date:'21/4/2014',
                loanValue:'200$',
            },

            {
                loanid:'3',
                date:'20/12/2015',
                loanValue:'300$',
            }]
    },




 userid:'2',
 fullName :'joe salloum',
 dob:'11/04/1993',
 gender:'M',
loan:[{
loanid:'4',
date:'20/7/2012',
loanValue:'500$',
}, 

 {
loanid:'5',
date:'21/4/2017',
loanValue:'600$',
 },

{
loanid:'6',
date:'20/12/2012',
loanValue:'700$',
}

  ],

    }]
}



 }

所以我写了这个函数来映射这个对象数组：

renderTable(userValue) {
let HTML = [];
let groupedVals = groupBy(userValue, 'userid');
let usersObj = [];

map(groupedVals, (value,  key) => {

    let userss = {
       FullName: value.fullName,
        dob: value.dob,
        gender: value.gender,
        loans: []
    }

    map(value, (subValue) => {                
        userss.loans.push(subValue.loanValue)
    })

    usersObj.push(userss);




})


map(usersObj, (val) => {

    HTML.push(<tr>
        <td>
            {val.FullName}
        </td>

        <td>
            {val.dob}
        </td>

         <td>
            {val.gender}
        </td>

        <td>
            {val.loans.join(',')}
        </td>
      </tr>
        )
        })


 return HTML;
  }

我想创建一个包含以下字段的表格：fullName，dob，性别和贷款

我想证明userid = 1在一个td中具有多个贷款价值

所以我创建了这个表：

render() {
return (
    <div className="container">
        <table className="table table-striped">

            <thead>
                <tr>
                    <td>FullName</td>
                    <td>dob</td>
                    <td>gender</td>
                    <td>loans</td>
                </tr>
            </thead>
            <tbody>
                {
                    this.state.users &&
                    this.renderTable(this.state.users)
                }
            </tbody>
        </table>
    </div>
);

}

有没有帮助的人？预先感谢

Answer 1

render() {
return (
    <div className="container">
        <table className="table table-striped">

            <thead>
                <tr>
                    <td>FullName</td>
                    <td>dob</td>
                    <td>gender</td>
                    <td>loans</td>
                </tr>
            </thead>
            <tbody>
                {
                    this.state.users.map((user) => (
                        <tr>
                             <td>{user.fullName}</td>
                             <td>{user.dob}</td>
                             <td>{user.gender}</td>
                             <td>{user.loan.map((loan) => { return (loan.id + ",") })}</td>
                        </tr>
                    ))
                }
            </tbody>
        </table>
    </div>
);
}

反应映射功能不起作用

1 个答案: