Question

我正在学习Django + ReactJS，我在从Django模型中获取数据时遇到了麻烦。

我正在本教程中逐步完成：http://geezhawk.github.io/using-react-with-django-rest-framework

然而，当我在firefox中检查控制台时，我收到“请求失败，状态码为500”消息。 Django + React集成工作正常，但由于某种原因它不会获取数据。有什么想法吗？

网站中的代码如下：

型号：

from django.db import models

class Book(models.Model):
    title = models.CharField(max_length=200, unique=True)
    author = models.CharField(max_length=100)

串行：

from rest_framework import serializers
from .models import Book

class BookSerializer(serializers.ModelSerializer):

    class Meta:
        model = Book
        fields = ('title', 'author')

views.py

from rest_framework import generics
from .models import Book
from .serializers import BookSerializer

class BookList(generics.ListCreateAPIView):

    queryset = Book.objects.all()
    serializer_class = BookSerializer

的index.html

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
    <head>
        <title>Hello React</title>
    </head>
    <body>
        <div id="container"></div>
        {% render_bundle 'main' %}
    </body>
</html>

index.js

var React = require('react')
var ReactDOM = require('react-dom')

var BooksList = React.createClass({
    loadBooksFromServer: function(){
        axios.get(this.props.url)
        .then(function (data) {
            this.setState({data: data});
            }.bind(this)
        )
        .catch(function (error) {
            console.log(error);
        });
    },

    getInitialState: function() {
        return {data: []};
    },

    componentDidMount: function() {
        this.loadBooksFromServer();
        setInterval(this.loadBooksFromServer, 
                    this.props.pollInterval)
    }, 
    render: function() {
        if (this.state.data) {
            console.log('DATA!')
            var bookNodes = this.state.data.map(function(book){
                return <li> {book.title} </li>
            })
        }
        return (
            <div>
                <h1>Hello React!</h1>
                <ul>
                    {bookNodes}
                </ul>
            </div>
        )
    }
})

ReactDOM.render(<BooksList url='/api/' pollInterval={1000} />, 
    document.getElementById('container'))

Answer 1

@somethingstrag我建议您在实际使用之前在邮递员中测试您的API。你能告诉我你如何注册网址的信息吗？

this.props.url

请发布您收到的错误。错误代码500表示内部服务器错误。

无法通过Django + ReactJS框架获取数据

1 个答案: