react-dates DayPickerRangeController的onDatesChange回调返回startDate/endDate均为null

问题核心原因 #

• DayPickerRangeController 是无内置输入区域的纯日期面板组件，交互逻辑完全依赖外部传入的 focusedInput 状态。当初始 focusedInput 为 null 时，组件处于未激活状态，面板点击操作不会触发正常的日期赋值，只会返回空的日期对象触发回调。
• react-dates 对传入的 startDate、endDate 仅接受合法 Moment 实例或 null，传入非法字符串等非标准日期类型时，会触发内部校验逻辑：抛出日期无效警告，同时将非法值原样回传。你之前把startDate初始值改成非法字符串时，能打印到该值同时收到无效警告，正是因为组件检测到传入的日期类型不合法，触发了校验回传逻辑，不属于正常日期选择的回调流程。

修复方案 #

• 调整 focusedInput 初始值，从 null 改为 'startDate'，让组件挂载后直接进入起始日期选择状态，避免未激活导致的空回调：

  // 旧的初始值
  // const [focusedInput, setFocusedInput] = useState(null);
  // 修正后
  const [focusedInput, setFocusedInput] = useState('startDate');
  

• 引入 Moment 作为日期值的统一类型，所有 startDate、endDate 的赋值都使用合法 Moment 对象，不要传入普通字符串、数字等其他类型值：

  // 先在项目中安装并引入 moment
  import moment from 'moment';
  // 无默认选中日期可直接保留 null
  const [dates, setDates] = useState({
    startDate: null,
    endDate: null
  });
  

• 补全 onDatesChange 的状态同步逻辑，将回调返回的新日期值直接更新到本地 state，不要注释掉赋值语句：

  const onDatesChange = (newDates) => {
    // newDates 是组件返回的合法 {startDate, endDate} 结构
    setDates({
      startDate: newDates.startDate,
      endDate: newDates.endDate
    });
    console.log('选中的日期：', newDates);
  }
  

• 若不需要纯面板、需要带输入框的日期范围选择能力，可直接替换为 DateRangePicker 组件，该组件内置输入框聚焦逻辑，不需要手动初始化 focusedInput 状态。

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