将表单数据作为json从ReactJS发送到嵌套序列化器

问题描述 投票:0回答:1

在将数据发布到具有以下序列化程序的端点时,我在reactjs中收到此错误{"user":["This field is required."]}

class ProfileSerializer(serializers.ModelSerializer):
    user = UserProfileSerializer()

    class Meta:
        model = models.Profile
        fields = ['user',
                  'address',
                  'city',
                  'country',
                  'user_type',
                  'telephone_Number',
                  'organisation_name',
                  ]

    def create(self, validated_data):
        print(validated_data)
        user_data = validated_data.pop('user')
        user = UserProfile.objects.create(**user_data)
        profile = Profile.objects.create(user=user, **validated_data)
        return profile

在浏览器的网络选项卡上,我可以看到如图所示捕获了所有数据

user: [{"name":"Testing user"},{"email":"[email protected]"},{"password":"*****"},{"is_active":true}]
user_type: 2
organisation_name: Testing company
address: N/A
city: N/A
country: Test
telephone_Number: 8888763

这就是我从reactjs发布数据的方式

 let data = this.state.data;
      let user = [
        { name: data.name },
        { email: data.email },
        { password: data.password },
        { is_active: data.is_active },
      ];
      let form_data = new FormData();
      form_data.append("user", JSON.stringify(user));
      form_data.append("user_type", data.user_type.value);
      form_data.append("organisation_name", data.organisation_name);
      form_data.append("address", data.address);
      form_data.append("city", data.city);
      form_data.append("country", data.country);
      form_data.append("telephone_Number", data.telephone_Number);
      await saveUser(form_data);

编辑经过进一步的检查,我注意到问题出在此await saveUser(form_data);如图data: FormData {}所示,http post请求上的数据对象为空,因此问题似乎在于如何将表单数据转换为json对象。我该如何转换?请帮助这可能是什么问题?请协助

reactjs django-rest-framework
1个回答
0
投票

FormData确实引起了很多问题,我的问题是我用来将数据发布到服务器的格式。我从状态对象创建了javascript对象,并且能够将数据成功发布到服务器,如下所示。我必须给出答案,以便将来有人遇到相同的问题时,他/她不会像我那样遭受痛苦。哈哈

let data = this.state.data;
      let user = {
        name: data.name,
        email: data.email,
        password: data.password,
        is_active: data.is_active,
      };
      const userData = {
        user,
        organisation_name: data.organisation_name,
        name: data.name,
        address: data.address,
        city: data.city,
        country: data.country,
        telephone_number: data.telephone_Number,
        user_type: data.user_type.value,
      };
      await saveUser(userData);
© www.soinside.com 2019 - 2024. All rights reserved.