React+Django提交表单后如何获取返回的文章ID

核心问题 #

1. 视图自定义方法未生效：你继承了generics.CreateAPIView，但自定义的article方法并非该视图处理POST请求的默认方法（默认是create），所以你的逻辑根本没执行，实际走的是父类默认的create流程，但因为序列化器未包含id字段，返回数据里没有id。
2. 序列化器缺少id字段：CreateArticleSerializer仅配置了title字段，即便实例保存成功，响应里也不会返回id。
3. Model的ID生成逻辑错误：id字段的default=generate_unique_id()会在类定义时就执行函数，导致所有新创建的Article实例共用同一个UUID，必然引发主键冲突，正确做法是传递函数本身而非调用结果。

具体修正步骤 #

1. 修正models.py的ID生成逻辑 #

import uuid

def generate_unique_id():
    return str(uuid.uuid4())  # 转字符串避免UUID对象存储问题

class Article(models.Model):
    id = models.CharField(max_length=36, default=generate_unique_id, primary_key=True)  # 去掉括号，传函数引用
    title = models.CharField(max_length=50)

    def __str__(self):
        return self.title

2. 调整序列化器，包含id字段 #

修改CreateArticleSerializer，让它返回id，同时标记id为只读（前端无需提交）：

from rest_framework import serializers
from .models import Article

class CreateArticleSerializer(serializers.ModelSerializer):
    class Meta:
        model = Article
        fields = ('id', 'title')
        read_only_fields = ('id',)  # 前端无需传id，由后端生成

3. 简化视图类（无需自定义article方法） #

generics.CreateAPIView的默认create方法已处理保存逻辑，只要序列化器包含id，就能自动返回完整数据：

from rest_framework import generics
from .models import Article
from .serializers import CreateArticleSerializer

class CreateArticle(generics.CreateAPIView):
    queryset = Article.objects.all()
    serializer_class = CreateArticleSerializer

    # 可选：如果需要自定义返回状态或额外逻辑，重写create方法
    def create(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        self.perform_create(serializer)
        headers = self.get_success_headers(serializer.data)
        return Response(serializer.data, status=status.HTTP_201_CREATED, headers=headers)

4. 前端获取并使用ID #

现在Axios响应数据里会包含id字段，直接提取即可：

try {
    API.post("/create/", { ...article }).then((response) => {
        const articleId = response.data.id;
        console.log("文章ID:", articleId);
        // 这里可以跳转到详情页，比如 window.location.href = `/article/${articleId}`;
    })
} catch (err) {
    console.log(err)
}

验证要点 #

• 检查数据库中新增的Article实例是否有唯一UUID
• 查看POST请求的响应数据，确认包含id字段
• 前端控制台能打印出正确的文章ID

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