这个错误的根源很明确：当数据库返回null作为日期字段值时，parseISO(null)会生成一个无效的时间值，直接传入state就会触发「RangeError: Invalid Time Value」。咱们可以通过添加空值判断来解决这个问题，有两种简单的实现方式：

方式1：编写复用的安全日期解析函数 #

如果项目中有多处需要处理日期空值，推荐写一个通用工具函数，让代码更整洁：

// 可以放在组件类外部，或者单独的工具文件中
const safeParseISO = (dateValue) => {
  // 当dateValue为null、undefined或空字符串时，返回默认值（这里用当前日期，你也可以改成null或空字符串）
  if (!dateValue) {
    return new Date();
  }
  return parseISO(dateValue);
};

然后在componentDidMount的setState中替换原有的日期解析逻辑：

this.setState({
  // ...其他保持不变的字段
  deliveryDate: safeParseISO(project.deliveryDate),
  intakeDate: safeParseISO(project.intakeDate),
  requestedDate: safeParseISO(project.requestedDate),
  // ...其他保持不变的字段
});

方式2：直接在setState中添加三元判断 #

如果只是这一处需要处理，直接在赋值时判断更快捷：

this.setState({
  // ...其他保持不变的字段
  deliveryDate: project.deliveryDate ? parseISO(project.deliveryDate) : new Date(),
  intakeDate: project.intakeDate ? parseISO(project.intakeDate) : new Date(),
  requestedDate: project.requestedDate ? parseISO(project.requestedDate) : new Date(),
  // ...其他保持不变的字段
});

额外注意事项 #

• 如果业务逻辑允许日期为null，可以把默认值从new Date()改成null，但要确保使用这些日期的组件（比如日期选择器）能够正确处理null值，否则可能会出现新的渲染错误。
• 如果你用的是HTML5的<input type="date">，它只接受ISO格式的字符串，这时候可以把null转为空字符串：project.deliveryDate ? parseISO(project.deliveryDate).toISOString().split('T')[0] : ""

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