Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

158
Vistas
Unable to send data from React to Springboot

I couldn't save the data to the database. I can't understand what the issue is. API is working when tested it using Postman. I want to store name, dob, classroom, division and gender values to the database.

 <center><button type="submit" className="btn btn-primary" onClick={this.addStudent}>Register</button></center>

onClick in the button element will call the below addStudent() function.

addStudent (e) {
            let studentData = {
                name: this.state.name,
                dob: this.state.dob,
                classroom: this.state.classroom,
                division: this.state.division,
                gender: this.state.gender
            };
            
            JSON.stringify(studentData);
        
            ApiService.getStudents(studentData).then((response) => {
                console.log(response);
            });
        
        }

ApiService() is given below:

import axios from "axios";

const SAVE_DATA = "http://localhost:8080/api/save"
const STUDENT_DATA = "http://localhost:8080/api/students"

class ApiService {
    saveStudent(studentData) {
        console.log("Inside saveStudent()")
        return axios.post(SAVE_DATA, studentData);
    }

    getStudents() {
        return axios.get(STUDENT_DATA);
    }
}

export default new ApiService();

Springboot API Controller is given below:

package com.student.registration.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import com.student.registration.entity.Student;
import com.student.registration.services.RegServices;

@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping(value = "/api")
public class RegController {
    
    @Autowired
    RegServices services;
    
    @RequestMapping(value = "/save", method = RequestMethod.POST)
    public String saveData(@RequestBody Student student) {
        return services.save(student);
    }
    
    @RequestMapping(value = "/students")
    public List<Student> getAllStudents() {
        return services.getAll();
    }

}
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Replace your click function with this because you're calling the wrong function from your API service

addStudent (e) {
    let studentData = {
        name: this.state.name,
        dob: this.state.dob,
        classroom: this.state.classroom,
        division: this.state.division,
        gender: this.state.gender
    };
    
    studentData = JSON.stringify(studentData);

    ApiService.saveStudent(studentData).then((response) => {
        console.log(response);
    }).catch((error) => console.log(error));
}

and add async/await in your service

import axios from "axios";

const SAVE_DATA = "http://localhost:8080/api/save"
const STUDENT_DATA = "http://localhost:8080/api/students"

class ApiService {
    async saveStudent(studentData) {
        console.log("Inside saveStudent()")
        return await axios.post(SAVE_DATA, studentData);
    }

    async getStudents() {
        return await axios.get(STUDENT_DATA);
    }
}

export default new ApiService();
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda