antdでFormのinitialValuesを遅延セットする

antd の Form では initialValues property を使うと初期値を設定できる

ただし、遅延評価はしてくれないっぽい

そのため API で取得した値をセットするみたいなユースケースでは工夫が必要

多少調べたのでメモがてら残しておく

const { data, loading } = useQuery(SOME_QUERY);
import { Form } from "antd";
import { useEffect, useState } from "react";

export default function SomeComponent() {
  const [form] = Form.useForm();
  const [hoge, setHoge] = useState("");

  useEffect(() => {
    if (loading === false && data) {
      form.setFieldsValue({
        name: data.xxx.name,
      });
      setHoge(data.xxx.hoge);
    }
  });

  return (
    <>
      <Form name="example" form={form}>
        <Form.Item name="name"></Form.Item>
        <Form.Item name="hoge"></Form.Item>
      </Form>
    </>
  );
}

ポイントは

• Form.useForm を使う
• Form の form property に Form.useForm の value をセットする

以上