initialValues 更改时 antd 表单不会呈现

Question

我从 useSession() 挂钩获取数据并将其用于我的初始值。当我检查我的组件时一切正常。但是当用户刷新 ui 上的页面时，我的值在 ui 上被清除。但我可以看到在控制台上更新的初始值。我的组件相关代码部分是：

import {
  Form,
} from "antd";
import { User } from "@/types/User";
import { useSession } from "next-auth/react";

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

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

  // At first, I tried to this useEffect to render Form component. But it didn't work. I saw updated values in the console but the form didn't render with the updated values.
  // useEffect(() => {
  //   form.setFieldsValue({
  //     name: user?.name,
  //     locale: user?.locale,
  //   });
  // }, [session, form]);

  const onFinish = (values: FieldType) => {
    let putValues: PutValues = {
      name: values.name,
      locale: values.locale,
    };

    api.client
      .put("user", putValues)
      .then((res) => {
        notification.success({
          message: "Profile updated",
        });

        if (user) {
          // This function updates the session
          update({
            ...session,
            user: {
              ...user,
              name: res.data.data.name,
              avatar: res.data.data.avatar,
              locale: res.data.data.locale,
            },
          });
        }
      })
      .catch((res) => {...});
  };

  const onFinishFailed = () => {...};

  const customizeRequiredMark = () => {...}

  const onAvatarChange = () => {...}

  return (
    <div className="p-8">
      {contextHolder}
      <Form
        key={JSON.stringify(initialValues)} // This is required to render the form again when the initialValues change
        initialValues={initialValues}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 8 }}
        colon={false}
        layout="horizontal"
        requiredMark={customizeRequiredMark}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >

        <Form.Item<FieldType>
          name="name"
          label={<Label label="Name" required />}
          labelAlign="left"
          rules={[{ required: true, message: "Name field is required" }]}
        >
          <Input size="large" />
        </Form.Item>

        <Form.Item<FieldType>
          name="locale"
          label={<Label label="Locale" />}
          labelAlign="left"
        >
          <Select
            size="large"
            options={[
              { value: "ar", label: "Arabic" },
              { value: "en", label: "English" },
              { value: "tr", label: "Türkçe" },
            ]}
          />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 4, span: 8 }}>
          <Button
            loading={saving}
            type="primary"
            htmlType="submit"
            size="large"
            onClick={() => setSaving(true)}
          >
            Save
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default ProfileTab;

首先，我阅读并尝试了这些建议。 stackoverflow.com/61422607但是 useEffect() 钩子没有解决我的问题。然后我尝试使用

key

支撑我的组件。它解决了我的问题，但我不确定这是最佳实践。 任何人都可以提供见解或替代解决方案，以确保我的表单即使在页面刷新后也保留正确的初始值吗？

Answer 1

在 Form.Item 部分的底部，文档提到：

请注意，

initialValues

无法通过

setState

动态更新，在这种情况下您应该使用

setFieldsValue

。