React状态变量日期变更时显示为null的问题求助

核心原因 #

日期输入组件的onChange回调返回值类型和普通文本输入框不同（通常是Date对象或日期数组，而非字符串），如果直接按照普通输入框的逻辑更新filter状态，会因值处理不当导致状态被设置为null。

具体解决步骤 #

1. 单独处理日期组件的回调
   不要复用普通输入框的handleChange函数，为日期组件写独立的处理函数，将返回的Date对象转换为可序列化的字符串格式（如ISO格式）：

   const handleDateRangeChange = ([startDate, endDate]) => {
     setFilter(prev => ({
       ...prev,
       startDate: startDate ? startDate.toISOString() : '',
       endDate: endDate ? endDate.toISOString() : ''
     }));
   };
   

2. 检查状态初始化
   确保filter状态中日期字段的初始值为非null（比如空字符串），避免更新时因值缺失覆盖为null：

   const [filter, setFilter] = useState({
     // 其他字段
     startDate: '',
     endDate: ''
   });
   

3. 验证状态更新逻辑
   更新状态时必须使用扩展运算符...prev保留原有字段，防止仅更新日期字段时丢失其他输入的状态值。

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