React+Spring Boot传递日期参数报String转java.util.Date失败如何解决

问题根因 #

你使用的React DatePicker组件onChange回调返回的是原生Date类型对象，直接拼接在URL参数中时，会自动调用Date的toString()方法，输出格式类似Tue Oct 10 2023 00:00:00 GMT+0800，和后端@DateTimeFormat指定的yyyy-MM-dd格式不匹配，因此Spring Boot无法完成字符串到Date的类型转换。

解决方案1：无额外依赖直接格式化日期 #

可以手写简单的日期格式化方法，将Date对象转为后端要求的格式，同时优化axios参数拼接方式避免编码问题：

import axios from "axios";

// 日期格式化工具，输出yyyy-MM-dd格式
const formatDate = (date) => {
  if (!date) return ''
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

export default class OeeService{
  getA1AfterRework(startDate,stopDate,plantConfig){
    return axios.get("http://localhost:8080/api/oeeReports/A1AfterReworkRatio", {
      // 用axios自带的params参数自动拼接，避免手动拼接的异常
      params: {
        p_start_date: formatDate(startDate),
        p_stop_date: formatDate(stopDate),
        V_plant_config_num_id: plantConfig
      }
    })
  }
}

同时注意如果你的Select组件的options是{value: xx, label: xx}结构，需要修改Select的赋值逻辑，避免把整个对象传给后端：

<Select options={plantConfigs} onChange={(option) => setPlantConfig(option.value)}/>

解决方案2：用日期库格式化（项目已引入dayjs/date-fns时可选） #

如果项目已经引入了日期处理工具，直接调用格式化方法即可，以dayjs为例：

import dayjs from 'dayjs'

// 调用时直接格式化
const formattedStart = dayjs(startDate).format('YYYY-MM-DD')

内容的提问来源于stack exchange，提问作者Hakan özel