如何将数据插入子表中的数据从react到Django Rest框架模型

Question

我是新手反应和Django休息框架。我想在React中使用Fetch API插入Django模型中的配置文件数据。我不断获得响应标头：

{“ user”：[“不正确的类型。预期的pk value，接收str。

我已经通过在控制台上打印响应检查了，它给出了状态代码'200 OK'。但这也没有更新数据库。

我的提交表单功能是：

    const handleSubmit = (e) => {
        e.preventDefault();
        const profile = profileObj(selectedProfileImg, contact, city, country, address);
        localStorage.setItem('profile', JSON.stringify(profile))
        let form_data = new FormData()
        // *************************
        // this is the foreign key in the model and it gives the problem.
        // *************************
        form_data.append('user',JSON.parse(localStorage.getItem('data')).id) // (foriegn key value) User added by signing up 
        form_data.append('profile_img', profile.prof_img)
        form_data.append('contact',profile.contact)
        form_data.append('city',profile.city)
        form_data.append('country',profile.country)
        form_data.append('address',profile.address)
        form_data.append('store_title','storename') // (foriegn key value) Data with this key exists in database
        form_data.append('cus_status',profile.cus_status)
        
        // *********************************
        // Also I want to know what the boundary means in content 
        // type. As I see it on google so I used it but removing it 
        // gives another boundary error.
        // *********************************
        fetch('http://localhost:8000/customer_apis/addCustomer/', {
            method: 'POST',
            headers: {
                'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'
            },
            body: form_data
        })
            .then(res => {
                console.log(res)
                console.log(res.status)
                if (res.status !== 200)
                    document.getElementById('text-error').innerHTML = res.statusText
                else {
                    navigate('/create_store')
                }
            })
    }

我的Django模型是：

class CustomerData(models.Model):
    CUS_STATUS=(
        ('A','Active'),
        ('B','Blocked'),
        ('X','Blacklist')
    )
    # I imported the user as (from django.contrib.auth.models import User)
    user=models.ForeignKey(User, on_delete=models.CASCADE)
    store_title=models.ForeignKey(StoreData, on_delete=models.CASCADE, null=True, default='')
    city=models.CharField(max_length=50, default="")
    country=models.CharField(max_length=50, default="")
    address=models.CharField(max_length=200, default="")
    phone=models.IntegerField(default=00)
    profile_img=models.ImageField(upload_to=user_directory_path, blank=True,null=True)
    cus_status=models.CharField(max_length=20,choices=CUS_STATUS, default='A')

    def __str__(self):
        return str(self.store_title)

django api视图是：

@api_view(['POST','GET'])
def addCustomer(request):
    serializer = CustomerSerializer(data=request.data)
    if serializer.is_valid():
        serializer.save()
        return Response("Success")
    else:
        return Response(serializer.errors)

colesterializer是：

class CustomerSerializer(serializers.ModelSerializer):
    class Meta:
        model = CustomerData
        fields='__all__'

如何将数据添加到子表中，将数据添加到具有从React API到DJANGO REST框架的外键的子表？ 任何帮助将不胜感激。

Answer 1

我认为您需要使用其他一些字段上传用户和store_title数据。

class CustomerSerializer(serializers.ModelSerializer):
    user_id = serializers.IntegerField(write_only = True)
    store_title_id = serializers.IntegerField(write_only = True) 
    user = UserSerializer(read_only = True)
    store_title = StoreTitleSerializer(read_only = True)

    class Meta:
        model = CustomerData
        fields=("user", "store_title", "city", "country", "address", "phone", "profile_img", "cus_status", "user_id", "store_title_id", ) 

在前端，您可以上传user_id和store_title_id作为整数值。

const handleSubmit = (e) => {
    ...
    form_data.append('user_id', parseInt(JSON.parse(localStorage.getItem('data')).id, 10)) 
    ...
    form_data.append('store_title_id', 1) # for example
    ...