无法使用序列化程序将 POST 请求从 React 前端发送到 Django Rest Framework？答案

【问题标题】：Unable to send POST request from the React frontend to Django Rest Framework using serializer?无法使用序列化程序将 POST 请求从 React 前端发送到 Django Rest Framework？
【发布时间】：2021-08-31 22:40:03
【问题描述】：

我一直在尝试使用 React.js 中的 fetch 发布带有数据的请求。如何接收请求选项正文中发送的所有数据？我附上了序列化器模型以便更好地理解。

React Frontend（发送带有数据的 post 请求）

handleOnSubmit = (event)=>{
        const requestOptions = {
            method : "POST",
            headers : {
                Accept: "application/json",
                "Content-Type":"application/json"},
            body : JSON.stringify({
                name:this.state.name,
                est:this.state.est,
                org:this.state.org
            }),
        };
        fetch("api/add-company", requestOptions).then((response)=>{return response.json()}).then((data)=>{
            console.log(data)
        })
        event.preventDefault();
    }

models.py

class Company(models.Model):
    name = models.CharField(max_length=30, blank= False, null=False, unique=True)
    established = models.IntegerField()
    origin = models.CharField(max_length=64, null=False, blank=False)

序列化器.py

from rest_framework import serializers
from .models import Company,Brand

class AddCompanySerializer(serializers.ModelSerializer):
    class Meta:
        model = Company
        fields = ['name', 'established', 'origin']
        extra_kwargs = {'name':{'required':False},'established':{'required':False},'origin':{'required':False}}

【问题讨论】：

标签： reactjs django-rest-framework

【解决方案1】：

如果您想将数据作为 POST 请求的主体发送，那么您可以使用request.POST.get() 方法。在您的情况下，它将是：

name = json.loads(request.POST.get('name'))
est = json.loads(request.POST.get('est'))
org = json.loads(request.POST.get('org'))

【讨论】：

大哥，我试过用request.POST但是收不到数据。如您所见，当我通过 print(serializer) 语句打印序列化程序时，输出为 =AddCompanySerializer(data={'name': 'Nestle', 'est': '1866', 'org': 'Switzerland'} ): name = CharField(max_length=30, required=False, validators=[]) 建立 = IntegerField(required=False) origin = CharField(max_length=64, required =假）
但是当我试图通过 serializer.data 访问数据时，它只返回 {'name': 'Nestle'} 而不是整个 {'name': 'Nestle', 'est' : '1866', 'org': '瑞士'}。
我在主帖中添加了表格的图像以便更好地理解。
请出示AddCompanySerializer的代码
谢谢大哥回复。现在在文章末尾添加了 models.py 和 serializers.py 文件。

【解决方案2】：

您需要保存您的序列化程序。

if serializer.is_valid():
    response = serializer.save()
    return Response(response.data, status=status.HTTP_201_CREATED)

【讨论】：

我删除了 serializer.save() 因为它无法保存并引发完整性错误。然后我打印了从前端收到的序列化程序，整个字典都在那里： AddCompanySerializer(data={'name': 'Nestle', 'est': '1866', 'org': 'Switzerland'}): name = CharField(max_length=30, required=False, validators=[]) 建立 = IntegerField(required=False) origin = CharField(max_length=64, required=False) 但是当打印 serializer.data 时，它给了我这样的输出：{'name': 'Nestle'}
您请求 POST 的有效负载不正确。请把payload改成JS代码中的Stringify。
非常感谢。有效。这解决了问题。主体内对象的键名必须与序列化程序的字段名相似。