Как отобразить данные из MongoDB в Reactjs?

Question

Я постоянно получаю сообщение об ошибке: «Невозможно прочитать свойство» map of undefined, хотя в консоли указано, что имя пользователя, имя, membersActive присваиваются значения, но не используются. Так что, похоже, ошибка с моим отображением. Если кто-нибудь может мне помочь, это было бы здорово!

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

Вы не сможете использовать функцию map на object, она разрешена только на 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>
      ));
    }
  }