Antd Form页面刷新后initialValues不渲染问题及方案咨询

核心问题 #

页面刷新后，Antd Form无法正确渲染从useSession获取的initialValues——控制台能看到值已更新，但表单UI为空。尝试用useEffect调用form.setFieldsValue无效，给Form添加key={JSON.stringify(initialValues)}解决了问题，但不确定这是否为最佳实践，希望找到更合适的替代方案。

问题根源 #

1. session异步加载特性：useSession在页面刷新时是异步加载的，初始状态session为undefined，此时Form的initialValues全是undefined。当session加载完成后，initialValues更新，但Antd Form默认仅在首次挂载时读取initialValues，后续initialValues变化不会触发表单重新初始化。
2. 之前useEffect失效的原因：
   • 大概率未正确获取Form实例（比如遗漏Form.useForm()钩子调用）；
   • session更新时user未完成赋值，导致setFieldsValue传递的仍是undefined，或者执行时机过早，Form还未完成初始化。

你的key方案优缺点 #

优点 #

• 实现简单：通过JSON.stringify(initialValues)作为key，只要值发生变化，Form会被强制卸载并重新挂载，从而读取新的initialValues，快速解决UI不更新问题。

缺点 #

• 性能损耗：哪怕initialValues只有微小变化，整个Form及子组件都会重新渲染，带来不必要的性能开销；
• 潜在风险：JSON.stringify存在稳定性问题——若initialValues包含对象，键顺序变化但内容相同，或存在无法序列化的类型（如函数），会导致无意义的重新挂载；频繁序列化也会产生微小性能成本。

更优替代方案 #

方案1：正确使用Form实例+useEffect #

先确保获取Form实例，再在user更新时调用setFieldsValue，注意依赖项的准确性：

import { Form, FormInstance } from "antd";
// ...其他导入

const ProfileTab = () => {
  const { data: session, update } = useSession();
  const user = session?.user as User;
  // 获取Form实例，这一步是关键
  const [form] = Form.useForm<FieldType>();

  useEffect(() => {
    if (user) {
      // 等user有值后再设置表单内容
      form.setFieldsValue({
        name: user.name,
        locale: user.locale,
        avatar: user.avatar,
      });
    }
  }, [user, form]); // 依赖user和form，确保user变化时触发更新

  // ...其他逻辑保持不变

  return (
    <div className="p-8">
      {contextHolder}
      <Form
        form={form} // 绑定Form实例
        // 设置初始默认值，避免表单初始为undefined状态
        initialValues={{
          name: "",
          locale: "en",
          avatar: "",
        }}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 8 }}
        colon={false}
        layout="horizontal"
        requiredMark={customizeRequiredMark}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        {/* ...表单项 */}
      </Form>
    </div>
  );
};

有效原因

• 明确绑定Form实例，确保setFieldsValue能正确调用；
• 依赖user而非session，避免session存在但user未赋值的情况；
• 初始默认值让表单不会一开始就处于空白状态。

方案2：条件渲染Form #

等session加载完成后再渲染Form，确保Form首次挂载时initialValues已经是正确值：

const ProfileTab = () => {
  const { data: session, update } = useSession();
  const user = session?.user as User;

  // session未加载完成时显示加载状态
  if (!session) {
    return <div>加载中...</div>;
  }

  const initialValues = {
    name: user.name,
    locale: user.locale,
    avatar: user.avatar,
  };

  // ...其他逻辑保持不变

  return (
    <div className="p-8">
      {contextHolder}
      <Form
        initialValues={initialValues}
        // ...其他Form属性
      >
        {/* ...表单项 */}
      </Form>
    </div>
  );
};

优点

• Form仅在session加载完成后挂载，首次初始化就拿到正确的initialValues，无需后续更新；
• 无多余的重新挂载或setFieldsValue调用，性能最优；
• 用户体验更好，不会出现表单先空白再填充的闪烁问题。

方案3：用useMemo缓存initialValues #

配合上述方案，用useMemo缓存initialValues，确保仅当user变化时才重新计算：

const initialValues = useMemo(() => {
  if (!user) {
    return { name: "", locale: "en", avatar: "" };
  }
  return {
    name: user.name,
    locale: user.locale,
    avatar: user.avatar,
  };
}, [user]);

该方案可与方案1或2搭配使用，进一步优化性能，避免不必要的initialValues计算。

总结 #

• 你使用的key方案可行但并非最优解，适合快速临时解决问题，但存在性能损耗；
• 优先推荐方案2（条件渲染）：性能最优、逻辑清晰，用户体验更佳；
• 若无法使用条件渲染（如需要提前展示表单框架），推荐方案1（Form实例+useEffect），比key方案更高效稳定。

内容的提问来源于stack exchange，提问作者Fatih Çalış