Блог

Главная - Вопросы по программированию - Пустая реакция.Результаты JS

Пустая реакция.Результаты JS

#reactjs #django #django-rest-framework

#reactjs #django #django-rest-фреймворк

Вопрос:

Использование URL: http://localhost:3000/

После запуска cmd: запустите npm. (В интерфейсном терминале) И запуск cmd: python manage.py runserver (в серверном терминале)

Это и есть тот самый app.js

 import React, { Component } from 'react';

class App extends Component {
  state = {
    todos: []
  };

  async componentDidMount() {
    try {
      const res = await fetch('http://127.0.0.1:8000/api/');
      const todos = await res.json();
      this.setState({
        todos
      });
    } catch (e) {
      console.log(e);
    }
  }

  render() {
    return (
      <div>
        {this.state.todos.map(item => (
          <div key={item.id}>
            <h1>{item.title}</h1>
            <span>{item.description}</span>
          </div>
        ))}
      </div>
    );
  }
}

export default App;

settings.py

 CORS_ORIGIN_WHITELIST = [
    'http://www.localhost:3000',
]

#API PERMISSIONS
REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
}

INSTALLED_APPS = [
    'corsheaders',
    'rest_framework',
    'crispy_forms',
    'todo.apps.TodoConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Я пытаюсь создать задачи на основе этого руководства: https://wsvincent.com/django-rest-framework-react-tutorial /

В настоящее время должно быть отображено три задачи. (Я подтвердил, что эти три задачи находятся в базе данных и под экраном администратора).

Комментарии:

1. Что говорится в журнале консоли? Сообщает ли сервер разработки Django, что он получил какой-либо запрос?

2. Я думаю, вам нужно проверить ответ сервера. на стороне реакции все выглядит правильно

Метки: