我正在使用 Springboot 和 ReactJS 創建一個應用程式。在客戶端，我使用 POST 方法通過表單輸入資料。我正在輸入正確的值，但作為回應，它顯示 NULL 值。
我也從郵遞員那里檢查過，它也顯示了某些欄位的相同空回應。
import React, {useState} from "react";
import {Card, Typography, CardContent, Button} from "@mui/material";
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import axios from "axios";
import base_url from "../Api/BootApi";
const AddVehicles = () => {
const [vehicle,setVehicle] = useState({});
const handleForm=(e)=>{
console.log(vehicle);
postData(vehicle);
e.preventDefault();
}
const postData = (data) => {
axios.post(`${base_url}/vehicles`, data).then(
(response) => {
console.log(response)
console.log("success")
},(error)=>{
console.log(error)
}
)
}
return (
<>
<Typography gutterBottom variant="h4" align="center">
Add Vehicles
</Typography>
<Card variant="elevation" elevation={7} sx = {{maxWidth:450, margin: "0 auto", padding:"20px 5px"}}>
<CardContent>
<form onSubmit={handleForm}>
<Typography gutterBottom varient="h5">
Add your vehicles details...
</Typography>
<Grid container spacing = {1}>
<Grid item xs ={12} sm={4} >
<TextField required type = "number" label="Vehicle ID" variant="outlined" placeholder=" eg. 1003" fullWidth id="id" onChange={(e)=>{
setVehicle({...vehicle, id:e.target.value})
}}/>
</Grid>
<Grid item xs ={12} sm={4} >
<TextField required type = "number" label="Vehicle REG" variant="outlined" placeholder="eg. 6123" fullWidth id="REG" onChange={(e)=>{
setVehicle({...vehicle, REG:e.target.value})
}}/>
</Grid>
<Grid item xs ={12} sm={4} >
<TextField required type = "number" label="Vehicle VIN" variant="outlined" placeholder="eg. 9009" fullWidth id="VIN" onChange={(e)=>{
setVehicle({...vehicle, VIN:e.target.value})
}}/>
</Grid>
<Grid item xs ={12} >
<TextField required label="Maker" variant="outlined" placeholder="eg TATA" fullWidth id="maker" onChange={(e)=>{
setVehicle({...vehicle, maker:e.target.value})
}}/>
</Grid>
<Grid item xs ={12} >
<TextField required label="Model" variant="outlined" placeholder="eg NEXON" fullWidth id="model" onChange={(e)=>{
setVehicle({...vehicle, model:e.target.value})
}}/>
</Grid>
<Grid item xs ={12} >
<TextField required label="Variant" variant="outlined" placeholder="eg Electric" fullWidth id="variant" onChange={(e)=>{
setVehicle({...vehicle, variant:e.target.value})
}}/>
</Grid>
<Button type = "submit" sx={{margin:"20px 0px"}}variant="contained" color ="primary" fullWidth>Submit Details</Button>
</Grid>
</form>
</CardContent>
</Card>
</>
)
}
export default AddVehicles;
有人可以幫助我嗎，為什么會這樣，我該如何解決？
編輯 1：后端代碼服務類
package com.test.vehiclemanagement.service;
import com.test.vehiclemanagement.model.Vehicle;
import com.test.vehiclemanagement.repository.VehicleRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;
@Service
public class VehicleServiceImpl implements VehicleService{
@Autowired
private VehicleRepository vr;
public VehicleServiceImpl(){
}
@Override
public List<Vehicle> getVehicles() {
return vr.findAll();
}
@Override
public Vehicle getVehicle(long vehicleId){
return vr.getOne(vehicleId);
}
@Override
public Vehicle addVehicle(Vehicle vehicle){
vr.save(vehicle);
return vehicle;
}
@Override
public Vehicle updateVehicle(Vehicle vehicle){
vr.save(vehicle);
return vehicle;
}
@Override
public void deleteVehicle(long parseLong){
Vehicle entity = vr.getOne(parseLong);
vr.delete(entity);
}
}
車輛等級：
package com.test.vehiclemanagement.model;
import javax.persistence.Entity;
import javax.persistence.Id;
@Entity
public class Vehicle {
@Id
private long id;
private String make;
private String model;
private String variant;
private int VIN;
private int REG;
public Vehicle(long id, String make, String model, String variant, int VIN, int REG) {
super();
this.id = id;
this.make = make;
this.model = model;
this.variant = variant;
this.VIN = VIN;
this.REG = REG;
}
public Vehicle(){
super();
}
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getMake() {
return make;
}
public void setMake(String make) {
this.make = make;
}
public String getModel() {
return model;
}
public void setModel(String model) {
this.model = model;
}
public String getVariant() {
return variant;
}
public void setVariant(String variant) {
this.variant = variant;
}
public int getVIN() {
return VIN;
}
public void setVIN(int VIN) {
this.VIN = VIN;
}
public int getREG() {
return REG;
}
public void setREG(int REG) {
this.REG = REG;
}
@Override
public String toString() {
return "Vehicle{"
"id=" id
", make='" make '\''
", model='" model '\''
", variant='" variant '\''
", VIN=" VIN
", REG=" REG
'}';
}
}
uj5u.com熱心網友回復：
Spring Boot 默認使用 Jackson 來序列化和反序列化 REST API 中的請求和回應物件。由于您的 setter 方法被命名setVIN(…)，Jackson 假定變數名為vIN，因為 Java 命名約定（變數應以小寫字母開頭）。如果您真的想要大寫字母，請使用@JsonPropertysetter 或 over 欄位上的注釋（或 - 對于序列化 - 在 getter 上），如下所示：
import javax.persistence.Entity;
import javax.persistence.Id;
@Entity
public class Vehicle {
@Id
private long id;
private String make;
private String model;
private String variant;
@JsonProperty("VIN")
private int VIN;
@JsonProperty("REG")
private int REG;
public Vehicle(long id, String make, String model, String variant, int VIN, int REG) {
super();
this.id = id;
this.make = make;
this.model = model;
this.variant = variant;
this.VIN = VIN;
this.REG = REG;
}
public Vehicle(){
super();
}
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getMake() {
return make;
}
public void setMake(String make) {
this.make = make;
}
public String getModel() {
return model;
}
public void setModel(String model) {
this.model = model;
}
public String getVariant() {
return variant;
}
public void setVariant(String variant) {
this.variant = variant;
}
public int getVIN() {
return VIN;
}
public void setVIN(int VIN) {
this.VIN = VIN;
}
public int getREG() {
return REG;
}
public void setREG(int REG) {
this.REG = REG;
}
@Override
public String toString() {
return "Vehicle{"
"id=" id
", make='" make '\''
", model='" model '\''
", variant='" variant '\''
", VIN=" VIN
", REG=" REG
'}';
}
}
在客戶端，您正在發送帶有 name maker的欄位，但它應該是make，因為這是 JAVA 類中的欄位名稱。因此，更改這行客戶端代碼：
<Grid item xs ={12} >
<TextField required label="Maker" variant="outlined" placeholder="eg TATA" fullWidth id="maker" onChange={(e)=>{
setVehicle({...vehicle, maker:e.target.value})
}}/>
</Grid>
對此：
<Grid item xs={12}>
<TextField
required
label="Maker"
variant="outlined"
placeholder="eg TATA"
fullWidth
id="make"
onChange={(e) => {
setVehicle({ ...vehicle, make: e.target.value });
}}
/>
</Grid>
并且問題將得到解決。
uj5u.com熱心網友回復：
您需要再次檢查類中的某些欄位。
maker -> make
REG -> reg
VIN -> vin
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/486590.html
標籤：javascript 反应 弹簧靴 反应钩子 材料-ui