如何不转字符串修复RangeError: invalid time value？保持Date类型

你的问题出在当selectedDate是undefined或者无效的Date对象时，调用toISOString()会抛出invalid time value错误。要保持selectedDate的Date类型状态，同时修复错误，可以从以下几个方面处理：

1. 渲染时安全处理日期值 #

在给input的value赋值前，先判断selectedDate是否是一个有效的Date对象，只有有效时才调用toISOString()，否则传入空字符串：

<Input
  type="date"
  value={selectedDate instanceof Date && !isNaN(selectedDate.getTime()) ? selectedDate.toISOString().slice(0, 10) : ''}
  onChange={handleDateChange}
  disabled={disabled}
  min={new Date().toISOString().slice(0, 10)}
/>

2. 确保存入状态的是有效Date对象 #

虽然type="date"的input返回的是标准YYYY-MM-DD格式字符串，但保险起见，在处理日期变更时，先验证生成的Date对象是否有效，避免无效Date进入状态：

const handleDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const newDate = new Date(event.target.value);
  // 验证日期有效性
  if (!isNaN(newDate.getTime())) {
    setSelectedDate(newDate);
    onChange && onChange(newDate);
  }
};

额外优化：初始状态的安全处理 #

如果父组件传入的props.value可能是无效的Date，初始化状态时也可以先做验证：

const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(
  props.value instanceof Date && !isNaN(props.value.getTime()) ? props.value : undefined
);

这样处理后，既保持了selectedDate的Date类型状态，又避免了无效日期导致的RangeError。

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