React向Django API提交项目时字段为空，仅生成空条目求助

问题现象 #

开发React+Django应用实现基础CRUD功能，创建项目提交到数据库后，条目能成功创建，但projects/list页面仅显示删除按钮和非必填的image字段，title和body字段无内容。

核心错误点及修复步骤 #

一、React前端代码错误（CreateProject.js） #

1. State初始化与更新逻辑混乱
   原代码将title和body的state初始化为字符串，却在更新时试图转为对象，导致最终传递给后端的数据格式错误。修复方式：统一用一个project对象管理表单数据，简化状态更新逻辑。

   修改后的关键代码：

   import React, { useState } from 'react'
   
   const CreateProject = () => {
       // 统一用对象管理表单数据
       let [project, setProject] = useState({ title: "", body: "" })
       
       const handleChangeTitle = (value) => {
           setProject(prev => ({ ...prev, title: value }))
       }
       
       const handleChangeBody = (value) => {
           setProject(prev => ({ ...prev, body: value }))
       }
   
       let createProject = async () => {
           fetch('http://localhost:8000/api/project/create', {
               method: "POST",
               headers: {
                   'Content-Type': "application/json"
               },
               // 必须将数据转为JSON字符串放到body字段中
               body: JSON.stringify(project)
           })
       }
   
       return (
           <div>
               <h3>title</h3>
               <input type="text" name="title" onChange={e => handleChangeTitle(e.target.value)} value={project.title} />
               <br />
               <h3>body</h3>
               <input type="text" name="body" onChange={e => handleChangeBody(e.target.value)} value={project.body} />
               <br/><br/><br/>
               <button onClick={createProject}>submit</button>
           </div>
       )
   }
   
   export default CreateProject
   

2. Fetch请求数据传递错误
   原代码将表单数据放在自定义的project字段中，而非标准的body字段，且未将对象转为JSON字符串，导致后端无法正确解析title和body。修复方式：使用body: JSON.stringify(project)传递数据。

二、Django后端代码错误 #

1. 视图与路由映射错误
   原代码中CreateProjectView继承了ModelViewSet，却手动重写post方法，且路由错误地将get请求映射到post方法，导致请求处理逻辑混乱。

   推荐修复方案：直接使用ModelViewSet自带的CRUD方法，配合默认路由配置：

   # views.py
   class CreateProjectView(viewsets.ModelViewSet):
       queryset = Project.objects.all()
       serializer_class = ProjectSerializer
   

   # urls.py
   from rest_framework.routers import DefaultRouter
   
   router = DefaultRouter()
   router.register(r'project', CreateProjectView, basename='project')
   urlpatterns += router.urls
   

   若需保留自定义post方法，需修正路由映射：

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

验证修复 #

完成上述修改后，重新提交项目，数据库中title和body字段将被正确赋值，projects/list页面即可正常显示这两个字段的内容。

内容的提问来源于stack exchange，提问作者Amine Khiari