У меня есть API-интерфейс django-rest-framework с аутентификацией jwt. API работает и имеет аутентификацию. Я могу использовать API в порядке с URL в моем браузере, но я застреваю, пытаясь получить доступ к API с помощью React. Прошел ряд уроков с разной степенью успеха.
Я пытаюсь расширить эту паузу на React Frontend , чтобы использовать другие маршруты в моем API, и я не уверен, как?
В моем приложении js я начал с добавления списка задач в мое состояние:
constructor(props) {
super(props);
this.state = {
displayed_form: "",
logged_in: localStorage.getItem("token") ? true : false,
username: "",
todos: []
};
}
Затем я добавил вызов метода getTodos в мою функцию componentDidMount
componentDidMount() {
if (this.state.logged_in) {
axios
.post("http://localhost:8000/token-auth/", {
headers: {
authorization: `JWT ${localStorage.getItem("token")}`
}
})
.then(res => res.json())
.then(json => {
this.setState({ username: json.username });
})
.then(this.getTodos());
}
}
И мне нужна какая-то функция getTodos:
getTodos = (e, data) => {
e.preventDefault();
fetch("http://localhost:8000/core/users/", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(json => {
localStorage.setItem("token", json.token);
this.setState({
logged_in: true,
displayed_form: "",
username: json.user.username
});
});
};
В бэкенде должен быть URL-адрес в функции getTodos, который перечисляет пользователей, так как бэкэнд urls.py похож на этот в приложении django:
from django.urls import path
from .views import current_user, UserList
urlpatterns = [
path('current_user/', current_user),
path('users/', UserList.as_view())
]
То есть URL должен возвращать сериализатор json, который я могу перебрать?
У меня есть это в моем возвращении ():
{this.state.todos.map(item => (
<div key={item.id}>
<h2>{item.json.username}</h2>
</div>
))}
Что я делаю не так?