No pude guardar los datos en la base de datos. No puedo entender cuál es el problema. La API funciona cuando se probó con Postman. Quiero almacenar los valores de nombre, fecha de nacimiento, aula, división y género en la base de datos.
<center><button type="submit" className="btn btn-primary" onClick={this.addStudent}>Register</button></center>onClick en el elemento del botón llamará a la siguiente función addStudent().
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() se proporciona a continuación:
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();El controlador API Springboot se proporciona a continuación:
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(); } }Reemplace su función de clic con esto porque está llamando a la función incorrecta desde su servicio API
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)); }y agregue async/await en su servicio
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();