Проект создан, но его поля пусты при отправке из React в Django API

Я работаю над приложением React + Django. И я делал простую CRUD функциональность в этом приложении. все идет хорошо, но когда я пришел к созданию проекта и отправил его в базу данных django, он создается, но когда я смотрю на него на projects/list он показывает только кнопку удаления и поле изображения, которое не важно, я только хочу, чтобы title и body поля были показаны enter image description here

Это views.py

class CreateProjectView(viewsets.ModelViewSet):
    serializer_class = ProjectSerializer

    def post(self, request):
        project = ProjectSerializer(data=request.data)
        if project.is_valid(raise_exception=True):
            project.save()
            return Response(project.data)

urls.py

create_project = CreateProjectView.as_view({"get": "post"})
urlpatterns = [
   path("project/create", create_project, name="create-project"),
]

Теперь React CreateProject.js

import React, { useState } from 'react'

const CreateProject = () => {

    let [project, setProject] = useState([])
    
    let [title, setProjectTitle] = useState("")
    let [body, setProjectBody] = useState("")
    
    const handleChangeTitle = (value) => {
        setProjectTitle(project => ({ ...title, 'title': value}))
        console.log("Title:", value)
    }
    
    const handleChangeBody = (value) => {
        setProjectBody(project => ({ ...body, 'body': value}))
        console.log("Body: ", value)
    }


    let createProject = async () => {
        fetch('http://localhost:8000/api/project/create', {
            method: "POST",
            headers: {
                'Content-Type': "application/json"
            },
            // title: JSON.stringify(project_title),
            // title: project_title,
            // body: project_body,
            // image: "hello",
            // title: title,
            // body: body
            project: {
                "title": title,
                "body": body
            }
            // project:  project.title
        },
        )
        // let project = {project_title, project_body}
    }
    
    let handleSubmit = () => {
        setProject(project)
        
        createProject()
    }

  return (
    <div>
        <h3>title</h3>
        <input type="text" name="title" onChange={e => {handleChangeTitle(e.target.value)}} defaultValue={project?.title} />
        <br />
        <h3>body</h3>
        <input type="text" name="body" onChange={e => {handleChangeBody(e.target.value)}} defaultValue={project?.body} />
        <br/>
        <br/>
        <br/>
        
        <button onClick={createProject}>submit</button>
    </div>
  )
}

export default CreateProject

Я ожидал, что он покажет поля title и body и их содержимое, которые были созданы на странице создания проекта

Я перепробовал множество решений, но ничего не помогло. Оказалось, что проблема в компоненте CreateProject.js, где находится createProject(). Вот как я это исправил: Сначала я просто отправлял поля данных следующим образом:

title: project.title,
body: project.body,

но я должен был быть: 

body: JSON.stringify({
  title: project.title,
  body: project.body,
})

Я попробовал удалить JSON.stringify и оставить только {}, как это

body: {
  title: project.title,
}

но это должно быть именно так. В любом случае, это правильный способ отправки POST-запросов из React в Django с помощью React Functions

let updateProject = async () => {
        fetch(`http://localhost:8000/api/project/update/${projectId}`, {
            method: "PUT",
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                title: project.title,
                body: project.body
            })
        })
    }
Вернуться на верх