Функция React .map не работает после GET бэкенда Django с помощью axios

Я пытаюсь сделать простой React frontend, используя Django Rest Framework в качестве backend. Когда я делаю вызов Django и затем пытаюсь использовать функцию .map для отображения данных, я получаю "Uncaught (in promise) TypeError: this.state.users.map is not a function". Я новичок в React, поэтому это определенно что-то не то, что я делаю

import React from 'react';
import axios from 'axios';

class App extends React.Component {
    state = {
      users: []
    }
  
  
  componentDidMount() {
    axios.get('http://127.0.0.1:8000/api/users/')
    .then(res => {
      const users = res.data;
      this.setState({ users });
    })
  }

  render() {
    return (
      <ul>
        { this.state.users.map(user => <li>{user.username}</li>)}
      </ul>
    )
  }
}

export default App;

Может быть так:

 componentDidMount() {
    let data = null;
    axios.get('http://127.0.0.1:8000/api/users/')
    .then(res => {
      const users = res.data;
      data = users
    })
    this.setState({ data });
  }

Также не забудьте поместить ваш api адрес в .env файл, подробнее об этом здесь:

https://create-react-app.dev/docs/adding-custom-environment-variables/

NOTE: Я работаю в компонентах функций, поэтому я новичок в компонентах классов

Вернуться на верх