Using Fetch in REACT for PUT/PATCH doesn't work for me

Question

Hello in my React App I use this specific comportement to handle modification (status change actived/deactived)

const handleActifEspece = (index, statutActif) => {
        let especeAActiver = especes.find(espece => espece.id === index)
        especeAActiver.actif =  statutActif
        console.log(JSON.stringify(especeAActiver))
        fetch(`http://localhost:8000/api/especes/${index}`, {
            method: 'PUT',
            headers: { 'Content-type': 'application/json; charset=UTF-8',},
            body: JSON.stringify(especeAActiver)
        })
        .then(response => response.json())
        .then(data => {
            snackBar.openSnackbar("Espèce modifiée !")
            setSnackMode('success');
            setEspeces([...especes, data])
        })
        .catch(error => {
            console.error("Erreur pendant l'activation de l'espèce", error);
            snackBar.openSnackbar("Espèce non modifiée !")
            setSnackMode('error');
        })
    };

When I click on button in log I've got specific data : The JSON Stringigy of ma var is :

{"id":40,"nom":"Test 6","gaf":false,"actif":true,"instance":{"id":1}}

I've got ERROR 500 I use the DjangoRestFramework to handle API When I copy past the dat the url and got to PUT here is the error in Swagger :

{
    "instance": [
        "Incorrect type. Expected pk value, received dict."
    ]
}

[EDIT]

View.py

class EspeceView(viewsets.ModelViewSet):
    serializer_class = EspeceSerializer
    queryset = Espece.objects.all()

Serializers.py

class EspeceSerializer(serializers.ModelSerializer):

    class Meta:
        model = Espece
        fields = ('id', 'nom', 'gaf', 'actif', 'instance',)

    def to_representation(self, instance):
        self.fields['instance'] = InventaireSerializer(read_only=True)
        return super(EspeceSerializer, self).to_representation(instance)

Log in Terminal (Django Server running)

[03/Nov/2023 12:25:15] "OPTIONS /api/especes/40 HTTP/1.1" 200 0
Internal Server Error: /api/especes/40
Traceback (most recent call last):
  File "folders/Pepiniere_V2/.venv/lib/python3.11/site-packages/django/core/handlers/exception.py", line 55, in inner
    response = get_response(request)
               ^^^^^^^^^^^^^^^^^^^^^
  File "folders/Pepiniere_V2/.venv/lib/python3.11/site-packages/django/utils/deprecation.py", line 136, in __call__
    response = self.process_response(request, response)
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "folders/Pepiniere_V2/.venv/lib/python3.11/site-packages/django/middleware/common.py", line 108, in process_response
    return self.response_redirect_class(self.get_full_path_with_slash(request))
                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "folders//Pepiniere_V2/.venv/lib/python3.11/site-packages/django/middleware/common.py", line 87, in get_full_path_with_slash
    raise RuntimeError(
RuntimeError: You called this URL via PUT, but the URL doesn't end in a slash and you have APPEND_SLASH set. Django can't redirect to the slash URL while maintaining PUT data. Change your form to point to localhost:8000/api/especes/40/ (note the trailing slash), or set APPEND_SLASH=False in your Django settings.
[03/Nov/2023 12:25:15] "PUT /api/especes/40 HTTP/1.1" 500 68422

It's working well for POST (add) and DELETE but for PUT or PATCH it doesn't :( Please help ;)

Answer 1

I found ... It was the "/" after the url called .. My bad I didn't read all the error message ... it's works great now ! Thanks Vlad to told meto add traceback ;)

[...]
const handleActifEspece = (index, statutActif) => {
        let especeAActiver = especes.find(espece => espece.id === index)
        especeAActiver.actif =  statutActif
        console.log(JSON.stringify(especeAActiver))
        fetch(`http://localhost:8000/api/especes/${index}/`, {
[...]

/ is need after url called ... Thanks again