Reactjs i将数组数据插入材质UI表

我正在尝试创建一个表，一次列出所有用户，但在正确显示时遇到了问题

如果我有两个数组要混合（一个是列名，另一个是主数组用户列表，它们应该放在return语句中的什么位置？如果不是在空白屏幕上什么都不输出，就是抛出了这个错误，我会被卡住

const列=[
{字段：'id'，标题名称：'id'，宽度：70}，
{字段：'firstname'，标题名称：'firstname'，宽度：130}，
{字段：'lastName'，标题名称：'lastName'，宽度：130}，
{字段：'userName'，标题名称：'userName'，宽度：130}，
{字段：'userEmail'，标题名称：'Email'，宽度：180}，
{字段：'userRole'，标题名称：'Role'，宽度：80}
];
常量行=[
{id:userLists.userID，firstname:userLists.userFirstName，lastName:userLists.userName，userName:userLists.userName，userEmail:userLists.userEmail，userRole:userLists.userRoleID}，
];
返回(
{userLists.map（{}）=>{
返回
})}
);
}

您应该这样映射数据：

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

const列=[
{字段：'id'，标题名称：'id'，宽度：70}，
{字段：'firstname'，标题名称：'firstname'，宽度：130}，
{字段：'lastName'，标题名称：'lastName'，宽度：130}，
{字段：'userName'，标题名称：'userName'，宽度：130}，
{字段：'userEmail'，标题名称：'Email'，宽度：180}，
{字段：'userRole'，标题名称：'Role'，宽度：80}
];
const rows=userLists.map（user=>（{id:user.userID，firstname:user.userFirstName，lastName:user.userlasname，userName:user.userName，userEmail:user.userEmail，userRole:user.userRoleID}）；
返回(
);
}

如何访问

userlist

上的属性

userID

，同时映射到该属性上？现在就知道了（干杯）

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