如何在切换模态框新增/编辑模式时更新Antd表单字段值？

问题现象 #

使用 Ant Design 的 Modal 搭配 Form 组件时，切换新增（add）/编辑（edit）模式并传入不同 initialValues，表单字段值无法正常更新：

• 直接给 Form 传递 initialValues，字段值仅在关闭模态框重新打开后才显示
• 改用 useEffect + form.setFieldsValue 赋值，问题仅部分缓解，未彻底解决

问题原因 #

1. Form 初始化特性限制：initialValues 仅在 Form 第一次挂载时生效，后续属性更新不会触发表单重新赋值
2. Modal 缓存与时机冲突：Modal 使用 forceRender 会提前渲染表单，但切换模式时 initialValues 更新后，表单未及时响应状态变化
3. 重置与赋值时机错位：自定义的 useResetFormOnCloseModal 在模态框关闭时重置表单，但打开时的赋值操作可能滞后或被残留状态覆盖

解决方案 #

方案1：优化赋值时机，配合模态框打开状态 #

修改 ModalForm 组件，在模态框打开且 initialValues 变化时，先重置表单再赋值，确保每次打开都能加载最新数据：

const ModalForm = ({ open, onCancel, initialValues, mode }: ModalFormProps) => {
  const [form] = Form.useForm();

  useResetFormOnCloseModal({
    form,
    open,
  });

  // 模态框打开时，根据最新 initialValues 更新表单
  useEffect(() => {
    if (open) {
      // 先重置表单，清除之前的残留值
      form.resetFields();
      if (initialValues) {
        form.setFieldsValue(initialValues);
      }
    }
  }, [form, open, initialValues]);

  const onOk = () => {
    form.submit();
  };

  return (
    <Modal
      forceRender
      title={`${mode === "add" ? "新增" : "编辑"}账号`}
      open={open}
      onOk={onOk}
      onCancel={onCancel}
    >
      {/* 移除 Form 的 initialValues，避免初始化逻辑冲突 */}
      <Form form={form} layout="vertical">
        <Form.Item
          label="姓名"
          name="name"
          rules={[{ required: true, message: "请输入姓名！" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="学号"
          name="student_id"
          rules={[{ required: true, message: "请输入学号！" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: "请输入密码！" }]}
        >
          <Input.Password />
        </Form.Item>
      </Form>
    </Modal>
  );
};

方案2：移除 Modal 预渲染（可选） #

如果 forceRender 不是业务必需，可以直接移除该属性，让 Modal 在关闭时销毁表单组件，打开时重新渲染，此时 initialValues 就能正常生效：

// 移除 Modal 的 forceRender 属性
<Modal
  title={`${mode === "add" ? "新增" : "编辑"}账号`}
  open={open}
  onOk={onOk}
  onCancel={onCancel}
>
  <Form form={form} layout="vertical" initialValues={initialValues}>
    {/* ...表单项 */}
  </Form>
</Modal>

补充：修复提交逻辑（原代码遗漏编辑分支） #

原代码中 onFinish 仅处理了新增逻辑，需补充编辑模式的接口调用：

const onFinish = async (_: string, { values }: { values: any }) => {
  setLoading(true);
  let error;
  if (modalMode === "add") {
    const payload = {
      ...values,
      user_id: user!.id,
    };
    ({ error } = await addAccount(payload));
  } else {
    // 补充编辑接口调用逻辑
    ({ error } = await updateAccount(modalFormValues!._id, values));
  }

  if (error) {
    notification.error({
      message: modalMode === "add" ? "新增失败" : "编辑失败",
      description: "操作失败，请重试",
    });
  } else {
    notification.success({
      message: modalMode === "add" ? "新增成功" : "编辑成功",
      description: `${modalMode === "add" ? "新增" : "编辑"}账号 "${values.name}" 成功`,
    });
  }
  setModalOpen(false);
  refresh();
  setLoading(false);
};

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