使用Django Rest Framework构建的后端Json在前端使用React进行了某种定义

我目前正在尝试通过构建一个简单的待办应用程序来学习Django Rest Framework和React.js的集成，前者用于后端，后者用于前端。

views.py

from rest_framework import viewsets
from . import models
from .serializers import ToDoSerializer, ToDoContainerSerializer

class ToDoContainerViewSet(viewsets.ModelViewSet):

    queryset = models.ToDoContainer.objects.all().order_by('created')
    serializer_class = ToDoContainerSerializer

serializers.py

from rest_framework.serializers import HyperlinkedModelSerializer
from . import models as todo_model
from rest_framework.serializers import ReadOnlyField

class ToDoContainerSerializer(HyperlinkedModelSerializer):
    created_by = ReadOnlyField(source='created_by.id')

    class Meta:
        model = todo_model.ToDoContainer
        fields = (
            'url', 'id',
            'created_by',
            'todos_name',
            'todos_important',
            'todos_items_count',
        )
        extra_kwargs = {
            'url': {
                'view_name': 'todos:todocontainer-detail',
            },
        }

models.py

from django.db import models
from core.models import TimeStampedModel
from django.core.validators import MinValueValidator, MaxValueValidator

class ToDoContainer(TimeStampedModel):

    created_by = models.ForeignKey(
        user_model.User, on_delete=models.CASCADE, related_name="todo_container")
    todos_name = models.CharField(max_length=50)
    todos_important = models.BooleanField(default=False)

    def todos_items_count(self):
        todo_items = len(self.todo.all())
        return int(todo_items)

    def __str__(self):
        return str(self.todos_name)

我像上面那样构建视图，序列化器，模型，并且看起来像下面这样正确地生成了api。

我试图通过使用像下面这样的axios模块来将上面的json前端。

import React from 'react';
import axios from 'axios';
import ToDoCard from './ToDoCard';

class ToDoLists extends React.Component {
    state = {
        isLoading: true,
        toDos: []
    };
    getToDos = async () => {
        const { results } = await axios.get("/backend/todos-api/todo_container.json");
        console.log(results) //Errors here, 'results' is undefined
        this.setState({ toDos: results, isLoading: false })
    }
    componentDidMount() {
        this.getToDos();
    }
    render() {
        const { isLoading, toDos } = this.state;
        return (<section className="container">
            {isLoading ? (
                <div className="loader">
                    <span className="loader__text">Loading...</span>
                </div>
            ) : (
                    <div className="toDos">
                        {
                            toDos.map(toDo => {
                                return <ToDoCard
                                    key={toDo.id}
                                    id={toDo.id}
                                    todos_name={toDo.todos_name}
                                    todos_important={toDo.todos_important}
                                />
                            })
                        }
                    </div>
                )
            }
        </section>)
    }
}

export default ToDoLists;

但是'axios.get（“ / backend / todos-api / todo_container.json”）;中的'结果';' 是不确定的，尽管后端看起来像下面这样。

django结果

[04/Jan/2021 20:38:07] "GET /backend/todos-api/todo_container.json HTTP/1.1" 200 372

我还设置了如下设置，并尝试了'axios.get（“ / backend / todos-api / todo_container /”）;' 但是结果是一样的。“结果”是不确定的，后端看起来还不错。

settings.py

REST_FRAMEWORK = {
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 10,
    'DEFAULT_RENDERER_CLASSES': (
        'rest_framework.renderers.JSONRenderer',
        'rest_framework.renderers.BrowsableAPIRenderer'
    ),
    'DEFAULT_PARSER_CLASSES': (
        'rest_framework.parsers.JSONParser',
        'rest_framework.parsers.FormParser',
        'rest_framework.parsers.MultiPartParser'
    )
}

CORS_ORIGIN_WHITELIST = (
    'https://localhost:3000',
    'https://127.0.0.1:3000',
)

django结果

[04/Jan/2021 20:32:13] "GET /backend/todos-api/todo_container/ HTTP/1.1" 200 364

我应该怎么做才能解决这个问题？