如何在Reactjs中显示MongoDB的数据

Question

我经常收到一个错误：'无法读取未定义的属性'map'，即使在控制台中它说username、name、membershipActive被分配了值，但没有被使用。因此，我的映射似乎有一个错误。如果有人能帮我，那就太好了！

import React, { Component } from 'react';
import { getUserList } from "../services/backendCallService";
import axios from 'axios';
export default class ManageUsers extends Component {
state = { user: {} };
async componentDidMount() {
const { data: user } = await getUserList();
this.setState({ user });
}
getUsersList() {
return this.state.userInfo.map(user => {
const {username, name, membershipActive} = user;
})
}
render() {
return (
<div>
<h3>Manage Users</h3>
<table className="table">
<thead className="thead-light">
<tr>
<th>Username</th>
<th>Name</th>
<th>Membership Active</th>
</tr>
</thead>
<tbody>
{this.getUsersList()}
</tbody>
</table>
</div>
)
}
}

Answer 1

不能在object上使用map函数，只能在arrays上使用。这是一个正在工作的沙盒。出于显而易见的原因，我为user对象使用了伪值。

state = { user: [] };
getUsersList() {
if (this.state.user) {
return this.state.user.map(user => (
<tr>
<td>{user.username}</td>
<td>{user.name}</td>
<td>{user.membershipActive}</td>
</tr>
));
}
}