React与Django前后端交互：POST请求400错误修复后数据库存入空值的问题求助

嗨，我看了你遇到的问题，之前的400错误解决后又出现数据库存空值的情况，大概率是前后端数据传递的格式没对齐，咱们一步步排查：

一、前端传参结构问题（最可能的核心原因） #

看你的NewSpace.js里的handleSubmit函数：

function handleSubmit(formData) {
  mutate({ event: formData });
}

你把表单数据包在了event这个键里面，也就是说前端传给后端的请求体结构是这样的：

{
  "event": {
    "name": "你输入的名称",
    "description": "你输入的描述"
  }
}

但你的Django后端是直接从request.data里取name和description字段的，自然拿不到有效数据，所以只能存入空值。

修复方法：把传参改成直接传递formData即可：

function handleSubmit(formData) {
  mutate(formData);
}

二、检查后端Serializer配置 #

你没贴出Serializer的代码，要确保它正确对应了React模型的字段，比如：

from rest_framework import serializers
from .models import React

class ReactSerializer(serializers.ModelSerializer):
    class Meta:
        model = React
        fields = ['name', 'description']  # 必须包含这两个需要接收的字段

如果Serializer里没正确声明字段，也会导致无法正确解析前端传来的数据。

三、确认请求头和数据格式 #

你的createNewSpace函数（发起POST请求的逻辑）需要确保用JSON格式发送数据，而不是默认的FormData格式。比如用Axios的话：

import axios from 'axios';

async function createNewSpace(formData) {
  return axios.post('/你的接口路径', formData, {
    headers: {
      'Content-Type': 'application/json',  // 必须设置这个请求头
    }
  });
}

如果用Fetch API的话：

async function createNewSpace(formData) {
  return fetch('/你的接口路径', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(formData),  // 把JS对象转成JSON字符串
  });
}

因为你的EventForm已经把FormData转成了普通JS对象，所以必须用JSON格式发送，Django的DRF才能正确解析数据。

四、模型字段的合理性调整 #

你的React模型里name设置了blank=False但null=True，这其实有点矛盾：blank=False表示表单验证时这个字段不能为空，但null=True表示数据库允许存空值。如果前端确实会传递这个字段，建议把null=True去掉，改成：

name = models.CharField(max_length=20, blank=False)
description = models.CharField(max_length=200, blank=False)

这样既保证表单验证必填，数据库也不会存空值（只要前端正常传值）。

按照这个步骤改完，应该就能正常把前端输入的内容存入数据库了~

备注：内容来源于stack exchange，提问作者Rahul Bhat