无法将数据从 React 发送到 Springboot

Question

我无法将数据保存到数据库中。 我不明白问题是什么。 API 在使用 Postman 进行测试时工作正常。 我想将姓名、出生日期、教室、部门和性别值存储到数据库中。

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

按钮元素中的 onClick 将调用下面的 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() 如下：

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如下：

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();
    }

}

Answer 1

用这个替换你的点击 function 因为你从你的 API 服务中调用了错误的 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
    };
    
    studentData = JSON.stringify(studentData);

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

并在您的服务中添加 async/await

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();