Как получить данные из API (когда я использую карту, я получаю TypeError: userdata.map не является функцией)

Question

Мне нужна помощь для отображения данных из API. Когда я пытаюсь получить данные с картой, я получаю сообщение об ошибке. Ошибка типа: userdata.map не является функцией

import React from "react";
import axios from "axios";
export class HighscoreList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: ""
    };
  }
  componentDidMount() {
    axios
      .get("https://schnitzeljagdar.herokuapp.com/users/getAllUser")
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    return (
      <React.Fragment>
        <h2>User</h2>
        {this.state.users}
      </React.Fragment>
    );
  }
}

Answer 1

Попробуйте это https://codesandbox.io/s/wonderful-cherry-63ee9

export default class HighscoreList extends React.Component {
    state = {
      users: []
    };

  componentDidMount() {
      axios
      .get("https://schnitzeljagdar.herokuapp.com/users/getAllUser")
      .then(res => this.setState({users:[res.data]}))
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    const {users} = this.state;
    let array = users[0]?Object.values(users[0]):[];
    console.log(array)
    return (
      <React.Fragment>
         {array.map((arr,index)=>
          <div key={index}>
          <h2>{arr.username}</h2>
          <p>{arr.email}</p>
          </div>
          )}
      </React.Fragment>
    );
  }
}