React Datetime组件时间选择异常：修改后自动恢复默认值求助

我碰到过好几次这个问题，大概率是受控组件的状态同步没做好或者时间格式不匹配导致的，咱们一步步排查：

1. 检查onChange的状态更新逻辑 #

React Datetime的onChange回调返回的是一个Moment对象（组件依赖moment.js），如果你的状态管理用了字符串而非Moment对象，就会出现修改后重置的情况。

错误示例（状态存字符串）： #

const [meetingTime, setMeetingTime] = useState('2024-05-20 12:00 AM');

// 直接把Moment对象转成字符串存状态，组件无法正确解析
<Datetime
  value={meetingTime}
  onChange={(date) => setMeetingTime(date.toString())}
/>

正确示例（用Moment对象管理状态）： #

import moment from 'moment';

// 初始化用Moment对象，onChange直接存返回的对象
const [meetingTime, setMeetingTime] = useState(moment('2024-05-20T12:00:00'));

<Datetime
  type="text"
  className="form-control"
  id="meeting-name"
  placeholder="Meeting Time & Date"
  name="meetingTimestamp"
  value={meetingTime}
  onChange={(date) => setMeetingTime(date)}
  format="YYYY-MM-DD hh:mm A" // 必须包含时间格式占位符
/>

2. 确认format属性包含时间字段 #

如果你的format只设置了日期（比如YYYY-MM-DD），组件会忽略时间部分的修改，强制显示默认的12:00 AM。一定要把时间相关的占位符（hh/mm/A等）加到格式里，确保组件能正确解析和渲染时间。

3. 避免不必要的重渲染导致状态重置 #

如果你的初始状态是每次渲染都创建新的Moment对象（比如useState(moment())），或者父组件频繁重传props触发子组件重渲染，可能会导致状态被意外重置。

解决办法是用初始化函数创建初始状态，避免重复执行：

const [meetingTime, setMeetingTime] = useState(() => {
  // 只在组件挂载时执行一次
  return moment('2024-05-20T12:00:00');
});

4. 验证value的类型匹配 #

虽然组件支持传入符合格式的字符串，但字符串格式和format属性不匹配时，组件会无法解析，直接回退到默认值。最稳妥的方式是全程用Moment对象管理时间状态，减少格式兼容问题。

先从上面这几点入手排查，尤其是状态更新逻辑和format属性，这两个是最常见的触发原因。如果还是没解决，可以贴出完整的状态管理代码，我再帮你细化分析~

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