ReactJS/Firebase开发中如何将时间戳字段保存为null空值

报错和React不支持空值无关，是代码逻辑存在两处问题：

1. onChange回调没有做空值判断：用户清空选择器时，回调拿到的newValue为null，直接传入date-fns的format()方法处理null值，就会抛出Invalid time value的范围错误
2. 选择器的value被绑定为格式化后的字符串类型，但MUI日期选择器要求绑定值必须是Date实例或者null，传字符串会触发组件内部日期解析逻辑异常

控制台抛出的错误信息：

Uncaught RangeError: Invalid time value at Date.toISOString

MUI日期选择器原生支持null作为空值，不需要额外配置组件属性，只需要调整状态存储和回调逻辑即可：

• 日期状态初始值直接设为null，不要在选值时提前把值转成格式化字符串存储，状态始终存Date对象或者null
• onChange回调优先判断新值是否为空，为空时直接将状态设为null，不执行格式化逻辑
• 格式化字符串的操作挪到业务需要的环节（比如表单提交、自定义展示）再处理

修复后的组件代码参考：

import { useState } from 'react';
import { LocalizationProvider, MobileDatePicker } from '@mui/lab';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import TextField from '@mui/material/TextField';
import { format } from 'date-fns';

export default function DatePickerDemo() {
  // 初始值直接设为null
  const [datefrom, setDateFrom] = useState(null);
  const [dateto, setDateTo] = useState(null);

  const handleSubmit = () => {
    // 提交时再做格式化，空值传空串或者null按业务需求调整
    const formData = {
      dateFrom: datefrom ? format(datefrom, "MM/dd/yyyy") : null,
      dateTo: dateto ? format(dateto, "MM/dd/yyyy") : null
    }
    // 后续提交逻辑
  }

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <MobileDatePicker
        label={"Date From"}
        inputFormat="dd/MM/yyyy"
        closeOnSelect={true}
        value={datefrom}
        minDate={new Date()}
        views={["day"]}
        onChange={(newValue) => {
          // 空值直接存null，不执行格式化
          if (!newValue) {
            setDateFrom(null);
            return;
          }
          // 有有效值时直接存Date对象
          setDateFrom(newValue);
          if (!dateto) {
            setDateTo(newValue);
          }
        }}
        renderInput={(params) => (
          <TextField variant="outlined" {...params} fullWidth />
        )}
      />
    </LocalizationProvider>
  )
}

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