将数组循环到Material UI数据表中

Question

我正在尝试将Redux数组迭代到Material UI数据网格中，每次尝试渲染时都会收到数组为空的错误。存储数据在没有迭代循环的情况下正确加载，但是每当我尝试填充表时，它都会返回空。

我最好为此创建一个自定义方法，还是有更简单的修复方法？我以前使用过这条路线，但它是在一个更简单的组件上。

Error: UserList(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

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, lastName: userLists.surname, firstname: userLists.firstName, userName: userLists.username, userEmail: userLists.userEmail, userRole: userLists.userRoleID },
];
return (
<div style={{ height: 400, width: '100%' }}>
{userLists.length > 0 &&
userLists.map(( {userLists}) => {
<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
})}
</div>
);
}

Answer 1

这是使用箭头函数时常见的错误，您在映射调用中丢失了返回，或者将隐式返回()与块表达式{}:搞错了

{  // checking the array's length is redundant =P,
// make sure the array has something, though:
userLists?.map(( {userLists}) => {
// missing return here: 
return <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
}
)
}

甚至有一条关于它的推特=p。