Search code examples
javascriptnode.jsreactjsbackendmern

HTTP PUT request doesn't works


I development a app web with MERN to upload information about stundents in a school, so, I make my backend with MongoDB and JS and to make the request I used Axios library. For get the information about some student with the method GET this works so good, but when i tried to update some information about the student with the method PUT and doesn't update. In the console.log appears the new information but not on the backend, this is my code where i try to update this information

import { useDispatch, useSelector } from "react-redux";
import { onLoadEvents3, onSetActiveEvent3, onUpdateEvent3 } from "../store";
import { systemApi } from "../api";
import Swal from "sweetalert2";

export const usePerDatStore = () => {
  const eventId = "64a5fc8e8f32a8a62adddf3b";
  const dispatch = useDispatch();

  const { event, activeEvent } = useSelector((state) => state.perdat);

  const setActiveEvent3 = (perdatEvent) => {
    console.log(perdatEvent);
    dispatch(onSetActiveEvent3(perdatEvent));
  };

  const startSavingEvent3 = async (perdatEvent) => {

    try {
      dispatch(onUpdateEvent3({...perdatEvent}));
      console.log("Data antes de entrar al backend", perdatEvent);
      const {data} = await systemApi.put(`/events/${eventId}`,perdatEvent);
      console.log("datos obtenidos del backend despues del put",data.evento.datos_personales);
      
      // Lógica adicional para guardar los datos editados en el backend
    } catch (error) {
      console.log(error);
      Swal.fire('Error al guardar', error.response.data.msg, 'error');
    }
  };

  const startLoadingEvents3 = async () => {
    try {
      const { data } = await systemApi.get(`/events/${eventId}`);
      const events = data.evento
     dispatch(onLoadEvents3(events));
    } catch (error) {
      console.log("Error al cargar el usuario");
      console.log(error);
    }
  };

  return {
    activeEvent,
    event,
    setActiveEvent3,
    startSavingEvent3,
    startLoadingEvents3,
  };
};

and my systemApi.js to call axios and used the method i want import axios from "axios";

import {getEnvVariables} from '../helpers'


const {VITE_API_URL} = getEnvVariables()

const systemApi = axios.create({

    baseURL: VITE_API_URL


})

//todo interceptores
systemApi.interceptors.request.use(config =>{
    
    config.headers ={
        ...config.headers,
        'x-token': localStorage.getItem('token')
    }
    
    
    return config;
})

export default systemApi

On my console.log appears the next output (when click it save the new information)

perdatEvente output:

Data antes de entrar al backend 
{fname: 'Christian', snumber: '18400282', career: 'Mehcatronic', group: '11A', vinculacion: 'CETSA', …}
age: "26"
birth: "2001-09-09T01:30:00.000Z"
career: "Mehcatronic"
col: "El batan"
fname: "Christian"
gender: "Male"
group: "11A"
hnumber : "#2200"
mail:"[email protected]"
number:  "31113644888"
phone: "3111364"
snumber : "18400222282"
street: "Guadalupe Mero"
vinculacion: "CETSA"

This is the console.log from the data backend returns

data.event.datos_personales

    datos obtenidos del backend despues del put 
{fname: 'Christian', snumber: '18400282', career: 'Mehcatronic', group: '11A', vinculacion: 'CETSA', …}
age: "26"
birth: "2001-09-09T01:30:00.000Z"
career: "Mehcatronic"
col: "El batan"
fname: "Christian"
gender: "Male"
group: "11A"
hnumber: "#2200"
mail: "[email protected]"
number: "31113644888"
phone: "31113644800000000000000"
snumber: "18400222282"
street: "Guadalupe Mero"
vinculacion: "CETSA"

On the headers appears everything is good and the change is done but not. If needed some more information or another code such as slice or PerDat.jsx please let me know.

I hope you can help me. Regards. y8.


Solution

  • Resolved by doing the following:

    const {data} = await systemApi.put(`/events/${eventId}`,{datos_personales:perdatEvent});
    

    And works good!