无法将数据从 React 发送到 Springboot

Posted 2023-02-26

【中文标题】无法将数据从 React 发送到 Springboot

【英文标题】：Unable to send data from React to Springboot

【发布时间】：2022-01-21 13:38:14

【问题描述】：

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

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

按钮元素中的onClick会调用下面的addStudent()函数。

addStudent (e) 
            let studentData = 
                name: this.state.name,
                dob: this.state.dob,
                clas-s-room: this.state.clas-s-room,
                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();
    

【问题讨论】：

控制台有错误吗？也许这就是 CORS 的问题

@ZainKhan 控制台未显示任何错误

@ZainKhan 该程序未到达 ApiService() 中的 saveStudent() 函数内部。 saveStudent() 中的打印语句未在控制台中打印。为什么会这样？

但您在点击事件中调用了ApiService.getStudents

如果您觉得我的回答有帮助，请接受我的回答，谢谢

【参考方案1】：

用这个替换你的点击函数，因为你从你的 API 服务调用了错误的函数

addStudent (e) 
    let studentData = 
        name: this.state.name,
        dob: this.state.dob,
        clas-s-room: this.state.clas-s-room,
        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();

【讨论】：

仍然无法正常工作。控制台未显示任何错误。