React Datepicker报Uncaught RangeError: Invalid time value问题求助

核心问题分析 #

AddTask组件中，DatePicker的selected属性绑定了task.startDate，初始值是Date对象。但选择日期时，你通过handleInputChange将task.startDate修改为字符串格式的日期（如"2024-05-20"），而selected属性要求传入合法的Date对象，字符串无法被识别，导致渲染时抛出Invalid time value错误。

对比Task组件的差异：Task组件里的DatePicker使用的是value属性而非selected，value支持字符串格式的日期，因此不会触发错误。

解决方案 #

方案1：保持state中startDate为Date对象（推荐）

直接将DatePicker选择的Date对象存入state，避免类型转换错误：

// 修改AddTask组件中的DatePicker
<DatePicker
  selected={ task.startDate }
  onChange={date => setTask({ ...task, startDate: date })} // 直接赋值Date对象
  name="startDate"
  dateFormat="yyyy-MM-dd"
/>

同时，在提交给后端时，将Date对象转为后端需要的字符串格式：

// 修改saveTask中的data定义
var data = {
  title: task.title,
  description: task.description,
  startDate: task.startDate.toISOString().split("T")[0] // 转为"yyyy-MM-dd"格式字符串
};

提交成功后，将后端返回的日期字符串转回Date对象：

// 修改saveTask中的setTask逻辑
setTask({
  id: response.data.id,
  title: response.data.title,
  description: response.data.description,
  completed: response.data.completed,
  startDate: new Date(response.data.startDate) // 转回Date对象
});

方案2：统一用字符串格式存储日期

如果希望state中始终存储字符串格式的日期，需要将selected属性的字符串转为Date对象：

// 第一步：修改初始state的startDate为字符串
const initialTaskState = {
  id: null,
  title: "",
  description: "",
  completed: false,
  startDate: new Date().toISOString().split("T")[0] // 初始值为"yyyy-MM-dd"字符串
};

// 第二步：修改DatePicker的selected属性
<DatePicker
  selected={ new Date(task.startDate) } // 将字符串转为Date对象
  onChange={date => handleInputChange({target: {value: date.toISOString().split("T")[0], name: 'startDate'}})}
  name="startDate"
  dateFormat="yyyy-MM-dd"
/>

注意：确保后端返回的startDate是合法的日期字符串，否则new Date()会返回无效日期，仍会触发错误。

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