创建Verse时version_id在Payload中为null导致500内部服务器错误

• 创建新Verse时，DevTools网络面板的请求Payload中version_id显示为null
• 后端返回POST http://localhost:8000/verses 500 (Internal Server Error)
• 前端console.warn输出的version_id值却是正确的

前端VerseForm组件 #

// 示例代码，以实际业务代码为准
import { useState } from 'react';

const VerseForm = ({ selectedVersion }) => {
  const [content, setContent] = useState('');
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    console.warn('version_id:', selectedVersion.id); // 此处输出正确ID
    try {
      await fetch('http://localhost:8000/verses', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          content,
          version_id: selectedVersion.id
        }),
      });
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="输入Verse内容"
      />
      <button type="submit">创建Verse</button>
    </form>
  );
};

export default VerseForm;

后端Verse视图（以Django REST Framework为例） #

# views.py
from rest_framework import status
from rest_framework.response import Response
from rest_framework.decorators import api_view
from .models import Verse
from .serializers import VerseSerializer

@api_view(['POST'])
def verse_create(request):
    serializer = VerseSerializer(data=request.data)
    if serializer.is_valid():
        serializer.save()
        return Response(serializer.data, status=status.HTTP_201_CREATED)
    return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

Verse & Version模型（Django） #

# models.py
from django.db import models

class Version(models.Model):
    name = models.CharField(max_length=100)
    # 其他自定义字段

class Verse(models.Model):
    content = models.TextField()
    version = models.ForeignKey(Version, on_delete=models.CASCADE, related_name='verses')
    # 其他自定义字段

Verse序列化器（Django REST Framework） #

# serializers.py
from rest_framework import serializers
from .models import Verse

class VerseSerializer(serializers.ModelSerializer):
    class Meta:
        model = Verse
        fields = ['id', 'content', 'version']

1. 字段名不匹配是核心问题
   前端传的是version_id，但后端序列化器定义的字段是version（对应模型的外键字段名），后端无法识别version_id，导致version字段为空，触发外键非空约束，抛出500错误。

   • 方案一：前端修改字段名，将version_id替换为version：

     body: JSON.stringify({
       content,
       version: selectedVersion.id
     }),
     

   • 方案二：后端序列化器添加version_id字段，映射到version外键：

     class VerseSerializer(serializers.ModelSerializer):
         version_id = serializers.PrimaryKeyRelatedField(queryset=Version.objects.all(), source='version')
         class Meta:
             model = Verse
             fields = ['id', 'content', 'version_id']
     

2. 查看后端错误日志定位根因
   直接查看后端服务器的终端输出（比如Django的runserver日志），500错误会附带详细堆栈信息，比如是否是version字段必填但未传值，能快速锁定问题点。

3. 确认前端数据类型
   检查selectedVersion.id是否为数字类型，如果是字符串，后端可能无法转换为外键ID导致验证失败，可通过Number(selectedVersion.id)转换为数字后再传入。

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