400 неверных запросов в запросе «POST» в реакции django

Question

У меня есть реагирующий компонент, в котором я отправляю данные в бэкэнд djnago, но он всегда дает мне 400 неверных запросов в качестве ответа и в бэкэнд-консоли.

      import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { Button } from 'react-bootstrap'
import API_URL from './BackendDefaustUrls';
import {useNavigate, useParams} from "react-router-dom"

const AddProduct = () => {
    const [Image , setImage] = useState(null)
    const [Name , setName] = useState("")
    const [Price , setPrice] = useState("")
    const [Description , setDescription] = useState("")
    const [Category , setCategory] = useState("")
    const navigate = useNavigate()
    
    const {id} = useParams()
    
    const getProduct = async () => {
        await axios.get(API_URL+`api/${id}/`).then(response => {
            return response.data
        }).then(data => {
            setName(data.name)
            setImage(data.image)
            setPrice(data.price)
            setDescription(data.description)
            setCategory(data.category)
        })

    }

    useEffect(()=>{
        getProduct()
    },[])

    const AddProductInfo = async () =>{


        let formField = new FormData()
        formField.append('name',Name)
        formField.append('price',Price)
        formField.append('description',Description)
        formField.append('category',Category)
        
        if (Image != null) {
        formField.append('image',Image)
        }

        
        await axios({
        method: 'POST',
        url: API_URL + `api/`,
        data:formField
        }).then(response => {
        console.log(response.data);
        navigate("/")
        })

    }

    return (
        <div>
        <div className='container'>
            <div className="w-75 mx-auto shadow p-5">
                <h2 className="text-center mb-4">Add A Student</h2>
                
                <div className='form-group'>
                {/* image */}
                <label>Select Image To Upload</label>
                <input
                    type="file"
                    name="image"
                    className='form-control form-control-lg'
                    onChange={e=>setImage(e.target.files[0])}
                />
                </div>
                {/* !!!!!!!!!!!!!!!!!!!!!!! */}
                <div className='form-group'>
                <input
                    type="text"
                    name="name"
                    className='form-control form-control-lg'
                    placeholder="Enter Product Name"
                    value={Name}
                    onChange={e=>setName(e.target.value)}
                />
                </div>

                <div className='form-group'>
                <input
                    type="text"
                    name="price"
                    className='form-control form-control-lg'
                    placeholder="Price of Product"
                    value={Price}
                    onChange={e=>setPrice(e.target.value)}
                />
                </div>

                <div className='form-group'>
                <textarea
                    type="text"
                    name="description"
                    className='form-control form-control-lg'
                    placeholder="Description"
                    value={Description}
                    onChange={e=>setDescription(e.target.value)}
                />
                </div>

                <div className='form-group'>
                <input
                    type="text"
                    name="category"
                    className='form-control form-control-lg'
                    placeholder="Category"
                    value={Category}
                    onChange={e=>setCategory(e.target.value)}
                />
                </div>
                <Button className='btn btn-success' onClick={AddProductInfo}>Upload</Button>
            </div>
        </div>
        </div>
    )
}

export default AddProduct

и мойview.pyявляется

      from django.shortcuts import render
from .serializers import ProductsSerializer
from .models import Product
from rest_framework import viewsets
# Create your views here.

class ProductViewSet(viewsets.ModelViewSet):
    queryset = Product.objects.all()
    serializer_class = ProductsSerializer

и я включаю скриншот, введите описание изображения здесь

если я просто удалю или зафиксирую функцию иuseEffect(), он публикуется нормально, но мое основное намерение этого компонента - обновить информацию с помощью «PUT», но это тоже не сработало. поэтому я попытался с «POST», и это дает мне ту же ошибку.

Я думаю, что если я смогу решить проблему с запросом "POST", THEN "PUT" будет решен.

и я уверен, что основная проблема сgetProduct().