MERN栈更新表单渲染时日期不显示、yyyy-MM-dd格式不匹配问题求助

问题根因 #

• HTML 原生type="date"属性的输入框，仅支持yyyy-MM-dd格式的字符串作为value赋值
• 你从数据库读取的dateOfBirth是完整的JS本地化日期字符串/日期对象，格式不符合输入框要求，浏览器会拒绝非法值赋值，所以触发报错同时输入框显示为空
• 另一个同类表单可以正常加载的原因，是对应表单在回显前已经做了日期格式转换，当前表单漏了这步处理

修复方案 #

只需要在状态初始化时，把原始日期值转换为符合规范的格式即可，代码修改如下：

const HHForm = ({user, userState}) => {
  // 提取原始日期值
  const rawDate = userState?.healthHistory[0]?.dateOfBirth
  let formatInitDate = ''
  // 先校验日期合法性，合法的话再转成yyyy-MM-dd格式
  if (rawDate && !isNaN(new Date(rawDate).getTime())) {
    formatInitDate = new Date(rawDate).toISOString().split('T')[0]
  }
  const [dateOfBirth, setDateOfBirth] = useState(formatInitDate)
  // 其余业务逻辑保持不变
}

逻辑说明 #

• 先用new Date()把任意合法日期格式转换为标准日期对象，isNaN(new Date(rawDate).getTime())用来校验日期是否合法，避免非法日期值导致代码报错
• 合法日期调用toISOString()会转换为yyyy-MM-ddTHH:mm:ss.sssZ格式的标准字符串，按字符T分割后取第一部分就是输入框要求的yyyy-MM-dd格式

内容的提问来源于stack exchange，提问作者Cip