React MaterialUI Date Picker报RangeError Invalid time value错误如何解决？

修复步骤 #

1. 修正状态初始值
   effectiveSelectedDate默认无初始值为undefined，DateFns工具类解析空值时会抛出无效时间错误，将初始值改为null即可适配MUI日期选择器的空值规则：

const [effectiveSelectedDate, setEffSelectedDate] = useState(null);

2. 补全日期选择器的空值兼容配置
   给KeyboardDatePicker明确指定空值规则，同时增加值的合法性校验，避免传入非Date/非null的异常值：

<KeyboardDatePicker    
    fullWidth
    variant='inline'
    placeholder='yyyy-MM-dd'
    format='yyyy-MM-dd'
    margin='normal'
    id='date-picker-inline'
    name='effectiveDate'
    // 校验值类型，只传入合法Date或null
    value={effectiveSelectedDate instanceof Date || effectiveSelectedDate === null ? effectiveSelectedDate : null}
    onChange={handleEffDateChange}
    // 明确空值对应内容
    emptyValue={null}
    KeyboardButtonProps={{ 'aria-label': 'change date',  }}
/>

同时确保handleEffDateChange直接存储回调返回的原生Date对象即可，不要额外转换为字符串，DateFns工具类不支持直接解析字符串格式的日期值。

3. 修正chip组件的回显逻辑
   chip渲染时需要先判断effectiveSelectedDate为有效值后再做日期格式化，避免空值传入new Date()或者格式化函数触发报错：

// chip 渲染示例
{effectiveSelectedDate && <Chip label={format(effectiveSelectedDate, 'yyyy-MM-dd')} />}

4. 修正遍历逻辑的变量引用错误
   当前makeColumns的遍历判断逻辑里使用的是未定义的data变量，你遍历的数组项是item，这里属于笔误，修改为item.className避免逻辑异常：

if (item.className.search("date_time") > -1) {

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