如何在表上显示所有数据库项目答案

【问题标题】：How to display all db items on a table如何在表上显示所有数据库项目
【发布时间】：2021-03-10 13:18:20
【问题描述】：

我想从数据库中检索所有项目，然后在 table

上显示用户

用户应该这样显示：

我可以只显示当前用户，这是我的代码：

const API_URL = "http://localhost:8080/api/auth/";

class AuthService {

  getCurrentUser() {
    return JSON.parse(localStorage.getItem('user'));;
  }
const currentUser = AuthService.getCurrentUser();

                        <TableBody>
                            {this.state.users.map(row => (
                                <TableRow key={row.id}>
                                    <TableCell component="th" scope="row">
                                        {currentUser.id}
                                    </TableCell>
                                    <TableCell align="right">{currentUser.username}</TableCell>
                                    <TableCell align="right">{currentUser.email}</TableCell>
                                    <TableCell align="right">{currentUser.roles}</TableCell>
    
                                </TableRow>

【问题讨论】：

标签： javascript reactjs mongoose axios jsx

【解决方案1】：

我假设您的数据已经加载，您需要将该数据传递到您的反应组件中。我建议现在坚持使用函数式组件，因为通过钩子你可以编写与基于类的组件相同的逻辑。

function MyTableComponent(props) {
  return (
    <TableBody>
      {props.users.map(user => (
        <TableRow key={row.id}>
           <TableCell component="th" scope="row">
              {user.id}
           </TableCell>
           <TableCell align="right">{user.username}</TableCell>
           <TableCell align="right">{user.email}</TableCell>
           <TableCell align="right">{user.roles}</TableCell>

         </TableRow>
       )}
    </TableBody>
  )}

然后您可以在模板中使用该组件并像这样传递道具：

<MyTableComponent users={myUsersArray} />

【讨论】：