Ant Design TimePicker组件变更时无法实时更新显示的问题排查

问题核心原因 #

你同时用了两种方式管理TimePicker的状态，导致状态冲突：

• Ant Design的Form.Item指定name后，表单会自动接管该字段的状态（包括值的存储和更新）。
• 但你又手动给TimePicker设置了value={moment(shiftStartTime, "HH:mm")}和onChange来维护自己的shiftStartTime状态，这就造成了Form内部状态和你手动维护的状态不一致。

初始创建时，Form状态为空，手动设置的value能正常生效；但修改时，Form已经存储了旧值，手动更新的shiftStartTime没有同步到Form的状态里，所以界面不会实时更新。而清空或选择「Now」时，触发了Form状态的强制同步，后续修改才恢复正常显示。

修复方案 #

两种可选方式二选一：

方式1：交给Form完全管理状态（推荐）

去掉TimePicker的value和onChange，让Form自动处理状态，保留必填规则即可：

<Form.Item
  name="shift_start"
  label="Shift Start Time"
  rules={[
    { required: true, message: "Please select the shift start time." },
  ]}
>
  <TimePicker
    format="HH:mm"
    use12Hours={false}
    defaultValue={moment("00:00", "HH:mm")}
  />
</Form.Item>

后续需要获取或修改该字段值时，通过Form实例方法操作，比如form.getFieldValue('shift_start')或form.setFieldsValue({ shift_start: moment('08:00', 'HH:mm') })。

方式2：手动维护状态但同步Form状态

如果必须自己维护shiftStartTime，需要在onChange里同时更新Form的状态：

// 先通过Form.useForm获取表单实例
const [form] = Form.useForm();

// ...

<Form.Item
  name="shift_start"
  label="Shift Start Time"
  rules={[
    { required: true, message: "Please select the shift start time." },
  ]}
>
  <TimePicker
    format="HH:mm"
    use12Hours={false}
    defaultValue={moment("00:00", "HH:mm")}
    value={moment(shiftStartTime, "HH:mm")}
    onChange={(time, timeString) => {
      setShiftStartTime(timeString);
      // 同步更新Form的状态
      form.setFieldsValue({ shift_start: moment(timeString, "HH:mm") });
    }}
  />
</Form.Item>

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