TypeError:在使用django rest框架时无法读取未定义的属性(读取‘用户名’)

Question

我一直在尝试让我的单个博客页面使用AXIOS.GET并使用reactjs和djangoREST框架中的段塞指定我的数据。我一直收到错误'TypeError:无法读取未定义的属性(读取‘用户名’)‘。请帮我看看这些密码。主页正常工作，但当我尝试打开单个博客帖子(帖子详细信息)时，我得到的类型错误似乎来自props.data.params.slug

models.py

from django.db import models
from django.contrib.auth.models import User
from tinymce.models import HTMLField
from django.utils.text import slugify

# Create your models here.
class BlogTag(models.Model):
    title = models.CharField(max_length=250, unique=True)
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

class Blog(models.Model):
    tags = models.ManyToManyField(BlogTag, related_name="blog_tags")
    cover = models.ImageField(null=True, blank=True, upload_to="media/")
    title = models.CharField(max_length=500, unique=True)
    slug = models.SlugField(default ="", editable = False, max_length=255)
    author = models.ForeignKey(User, related_name = "blog_author", on_delete=models.CASCADE)
    content =   HTMLField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ("-created_at",)

    def __str__(self):
        return f"{self.title} - {self.author.username}"

    def save(self, *args, **kwargs):
        self.slug = slugify(self.title, allow_unicode=True)
        super().save(*args, **kwargs)


class BlogComment(models.Model):
    blog = models.ForeignKey(Blog, related_name="blog_comments",  on_delete=models.CASCADE)
    name = models.CharField(max_length=255, default="Annonymous")
    ip = models.CharField(max_length=255, blank=True, null=True)
    comment = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ("-created_at",)

        def __str__(self):
            return f"{self.blog.title} - {self.name}"

router.js

import React from 'react'
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom'
import Home from './components/pages/Home/Home'
import SingleBlog from './components/pages/SingleBlogPage/SingleBlog'
import BlogCard from './components/pages/Home/Home'
import BlogCardExtra from './components/pages/Home/Home'
import MainLayout from "./components/Layout/MainLayout"


const Welcome = () => {
  return (
   <Router>
      <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/:slug" exact element={<SingleBlog />} />
      </Routes>
  </Router>
  )
}


export default Welcome



singleblog.js

import React , {useState, useEffect, useParams}  from 'react'
import MainLayout from "../../Layout/MainLayout"
import CommentComp from "../../Common/CommentComp"
import axios from "axios"
import { BLOG_URL } from "../../utils/urls"
import Skeleton from "react-loading-skeleton"
import moment from "moment"

const SingleBlog = (props) => {
  const [fetching, setFetching] = useState(true)
  const [activeBlog, setActiveBlog] = useState([])


  useEffect(() => {
    axios.get(BLOG_URL + props.match.params.slug).then(
      (res) => {
        setActiveBlog(res.data)
        setFetching(false)
        console.log(res.data)
      },
      (err) => {
        console.log(err)
      }
    )
  }, [])

  return (
    <MainLayout>
      <div className = "singleBlog">
        <div className = "cover-main"  style={{backgroundImage: `url("${!fetching && activeBlog.cover}")`}}/>
        <br />

        <div className="blogListContainer">
          <div className="blogList">
            <h3 key={activeBlog.id}>{activeBlog.title}</h3>
            <div className="author">
              Created by : {activeBlog.author.username}, on {moment(new Date(activeBlog.created_at)).format("YYYY-MM-DD")}
            </div>
              <p dangerouslySetInnerHTML={{__html: activeBlog.content}}/>

              <CommentComp />

          </div>
        </div>
      </div>
    </MainLayout>
  )
}

export default SingleBlog

Answer 1

可能您已经设法使Blog.author为空，并使用author=NULL获得了Blog的记录。我认为这是一个操作错误，您必须通过删除记录和修改字段来修复DB上的操作错误。其他一切都必须没事。