React+Ant Design：如何用后端数据预填DatePicker与TimePicker？

问题根源 #

1. 依赖数组错误：把form放进useEffect依赖，会导致每次表单状态更新（比如用户选择日期）触发组件重渲染，进而useEffect重复执行setFieldsValue，覆盖用户输入，造成选择器闪烁。
2. 空依赖的局限性：空数组[]只会让useEffect执行一次，若后端数据openHours是异步获取的，第一次执行时数据还未返回，自然无法预填。
3. 字段名拼写错误：代码中Form.Item的name="firsTermFrom"少了一个t，应为firstTermFrom，这会导致对应字段无法正确匹配数据。

解决方案 #

1. 修正依赖数组

只依赖**后端返回的数据源openHours**和日期格式dateFormat，确保只有当数据更新时才执行预填逻辑，避免不必要的重复触发。

2. 简化日期解析逻辑

提取通用工具函数，减少重复代码，同时用undefined代替空字符串作为字段空值（更符合AntD表单的空值规范）。

3. 修正字段名拼写错误

把firsTermFrom改为firstTermFrom，保证表单字段与数据键名匹配。

修改后的完整代码 #

// 提取通用日期解析函数
const parseDateTime = (value, format) => {
  if (!value || value === "Invalid date") return undefined;
  const momentInstance = moment(value, format);
  return momentInstance.isValid() ? momentInstance : undefined;
};

useEffect(() => {
  const data = openHours?.data?.data;
  if (!data) return; // 数据未返回时直接退出

  form.setFieldsValue({
    firstTermFrom: parseDateTime(data.firstTerm?.from, dateFormat),
    firstTermTo: parseDateTime(data.firstTerm?.to, dateFormat),
    secondTermFrom: parseDateTime(data.secondTerm?.from, dateFormat),
    secondTermTo: parseDateTime(data.secondTerm?.to, dateFormat),
    thirdTermFrom: parseDateTime(data.thirdTerm?.from, dateFormat),
    thirdTermTo: parseDateTime(data.thirdTerm?.to, dateFormat),
    studentStart: parseDateTime(data.studentsNewResumptionTime, "h:mm:ss a"),
    studentEnd: parseDateTime(data.studentNewClosingTime, "h:mm:ss a"),
    superStart: parseDateTime(data.supervisorNewResumptionTime, "h:mm:ss a"),
    superEnd: parseDateTime(data.supervisorNewClosingTime, "h:mm:ss a"),
  });
}, [openHours, dateFormat, form]); // form作为依赖是安全的，因为useForm返回的form是稳定引用

同时修正表单中的字段名：

<Form.Item
  name={"firstTermFrom"} // 修正拼写错误
  rules={[
    {
      required: true,
      message: "Please input first term start date",
    },
  ]}
>
  <DatePicker
    picker="date"
    className="openInput outline-0 w-52 rounded border-0 bg-inputBg px-10 py-3 font-InterMedium opacity-100 shadow-none"
    placeholder="Start date"
    format={dateFormat}
    size={"large"}
    data-testid="first-term-from"
  />
</Form.Item>

额外说明 #

• useForm返回的form实例是稳定引用，不会随组件重渲染变化，所以加入依赖数组不会导致额外触发。
• 增加if (!data) return的判断，避免在数据未就绪时执行无效的setFieldsValue。
• 工具函数parseDateTime统一处理了"Invalid date"、空值、无效格式等情况，让代码更简洁健壮。

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