antd에서 Form의 initialValues 지연 설정

antdForm에서 initialValuesproperty를 사용하면 초기값을 설정할 수 있습니다
그러나 지연 평가는 비슷하다안 해줘.
따라서 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 설정
    이상

    좋은 웹페이지 즐겨찾기