Функция 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: Я работаю в компонентах функций, поэтому я новичок в компонентах классов