Ant design timepicker 组件不会在更改时更新

Question

我在我的一个项目中使用 Ant Design 的 timepicker 组件来设置用户的轮班开始和结束时间。创建用户时，开始和结束班次时间是强制性的。当用户更改时间选择器中的时间时，用户可以看到他们在时间选择器组件中选择的预览时间（默认预期行为）。

然而，当用户决定改变轮班时间时，问题就出现了。每当他们更改时间时，他们都无法看到新选择的时间。只有当他们提交表单并再次打开它时，他们才能看到更改后的时间。但是，如果他们清除时间选择器并设置新时间，或者选择时间选择器中的

Now

选项，即使此后他们再次正常更改时间，他们也能够看到更改。

明确一点，用户每次更改时间时都无法看到更改后的时间预览。当字段被清除或时间设置为

Now

并再次更改时，它可以正常工作。

为什么会出现这种情况？

      <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} // Ensure 24-hour format
          defaultValue={moment("00:00", "HH:mm")}
          value={moment(shiftStartTime, "HH:mm")}
          onChange={(time, timeString) => {
            console.log("Selected shift start time:", time, timeString);
            setShiftStartTime(timeString);
          }}
        />
      </Form.Item>

这是带有轮班开始时间的表单项。

Answer 1

在 v5 中

antd

从

moment

切换为

dayjs

https://ant.design/docs/react/migration-v5

这里是工作示例：https://stackblitz.com/edit/vitejs-vite-ohi2rh?file=src%2FApp.jsx,src%2Fmain.jsx&terminal=dev