React + spring 引导：无法将类型“java.lang.String”的值转换为所需类型“java.util.Date”

Question

I have a code that I developed the front side with React and the back side with spring boot.

I want to see the return value on the screen by sending a code with the start date and end date by react.

I am using start date and end date as DateTimeFormat.

When I enter the start and end days from the swagger document, I see that my code works without any problems.

but when I enter these values on the screen, I get the error.

the screen of the code where I entered the values:

export default function Dashboard() {

    const [startDate,   setStartDate] = useState();
    const [stopDate,    setStopDate] = useState();
    const [plantConfig, setPlantConfig] = useState(14);

    
   const[a1rework,setAfterRework] = useState();
        
   function getAllValues(){
       debugger
        let oeeService = new OeeService()
        oeeService.getA1AfterRework(startDate,stopDate,plantConfig).then(result=>
            setAfterRework(result.data.data));
        
        }



    return (
        <div>

        <DatePicker  dateFormat="yyyy-MM-dd"  selected={startDate}   onChange={(date)=>setStartDate(date)} 
            placeholderText="Başlangıç Tarihi Seçiniz" startDate={startDate} endDate={stopDate}  minDate={startDate}    />
        <DatePicker  selected={stopDate} dateFormat="yyyy-MM-dd"  onChange={(date)=>setStopDate(date)} 
             placeholderText="Bitiş Tarihi Seçiniz" startDate={startDate} endDate={stopDate}  minDate={startDate} />
        <Select   options={plantConfigs} onChange={(plantConfig) => setPlantConfig(plantConfig)}/>
        <Button onClick={getAllValues} content='Check'primary></Button>
        </div>
        
    )
}

The code that calls the service in react:

 react - service class : 
    
    import axios from "axios";
    
    export default class OeeService{
        getA1AfterRework(startDate,stopDate,plantConfig){
            return axios.get("http://localhost:8080/api/oeeReports/A1AfterReworkRatio?p_start_date="+startDate+"&p_stop_date="+stopDate+"&V_plant_config_num_id="+plantConfig)
        }

screen where values are entered:

method called in java:

@GetMapping("/A1AfterReworkRatio")
DataResult<BigDecimal> a1AfterReworkRatio(@RequestParam int V_plant_config_num_id, @RequestParam @DateTimeFormat(pattern = "yyyy-MM-dd") Date p_start_date ,@RequestParam @DateTimeFormat(pattern = "yyyy-MM-dd") Date p_stop_date) {
    return this.oeeReportService.a1AfterReworkRatio( V_plant_config_num_id , p_start_date,  p_stop_date);
}

when i enter value in swagger document:

When I debug the code in React, I noticed that the start and end dates are sent differently to the backed side as follows

output of error on java side:

Failed to convert value of type 'java.lang.String' to required type 'java.util.Date';

how can i send date paramaters to java in correct format with react?

Answer 1

May be below code might solve your issue:

Be sure to debug the format you are receiving at the back end and update the date format with the below code

@GetMapping("/A1AfterReworkRatio")
DataResult<BigDecimal> a1AfterReworkRatio(@RequestParam int V_plant_config_num_id, @RequestParam String p_start_date , @RequestParam String p_stop_date) {

r_start_date = new SimpleDateFormat("YYYY-mm-DD").parse(p_start_date);
r_end_date = new SimpleDateFormat("YYYY-mm-DD").parse(p_end_date);

    return this.oeeReportService.a1AfterReworkRatio( V_plant_config_num_id , r_start_date,  r_stop_date);
}