Question

使用网址：http://localhost:3000/

运行cmd后：npm start。（在前端终端中）并运行 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/

当前应该显示三个待办事项。（我已经确认这三个待办事项在数据库和管理屏幕下）。

空白 React.JS 结果

0 个答案: