reactjs - 将数组数据迭代到 Material UI 表中
问题描述
我正在尝试创建一个表格来一次性列出我的所有用户,但我无法让它正确显示。
如果我有两个要混合的数组(一个是列名,一个是主数组用户列表应该放在 return 语句中的位置?我被困在一分钟了,它要么在空白屏幕上不输出任何内容,要么抛出此错误.
const columns = [
{ field: 'id', headerName: 'ID', width: 70 },
{ field: 'firstname', headerName: 'First name', width: 130 },
{ field: 'lastName', headerName: 'Last name', width: 130 },
{ field: 'userName', headerName: 'Username', width: 130},
{ field: 'userEmail', headerName: 'Email', width: 180 },
{ field: 'userRole', headerName: 'Role', width: 80}
];
const rows = [
{ id: userLists.userID, firstname: userLists.userFirstName, lastName: userLists.userSurname, userName: userLists.username, userEmail: userLists.userEmail, userRole: userLists.userRoleID },
];
return (
<div style={{ height: 400, width: '100%' }}>
{userLists.map(( {}) => {
return <DataGrid rows={rows} columns={columns} pageSize={10} checkboxSelection />
})}
</div>
);
}
解决方案
你应该这样映射你的数据:
const columns = [
{ field: 'id', headerName: 'ID', width: 70 },
{ field: 'firstname', headerName: 'First name', width: 130 },
{ field: 'lastName', headerName: 'Last name', width: 130 },
{ field: 'userName', headerName: 'Username', width: 130},
{ field: 'userEmail', headerName: 'Email', width: 180 },
{ field: 'userRole', headerName: 'Role', width: 80}
];
const rows =userLists.map(user=>({ id: user.userID, firstname: user.userFirstName, lastName: user.userSurname, userName: user.username, userEmail: user.userEmail, userRole: user.userRoleID }));
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid rows={rows} columns={columns} pageSize={10} checkboxSelection />
</div>
);
}