Bagaimana untuk menulis respons API ke dalam borang Formik?

Question

Bagaimana untuk menulis respons API kepada Formik? Saya mempunyai API yang melaluinya saya menerima data yang sepadan dengan borang saya dengan tepat, bagaimanakah saya menulis keseluruhan respons sekaligus dan bukannya menggunakan berbilang baris setFieldValue?

const form = useFormik({
        Nilai awal: {
          nama: "",
          log masuk: "",
          tentang: {
            umur: "",
            pangkat: {
              perak: benar,
              emas: palsu,
              global: palsu
            }
          }
        }
      }); // Borang permulaan saya

  const {
    nilai,
    mengendalikanTukar,
    setFieldValue,
  } = bentuk;

useEffect(() => {
    jika (!isEmpty(projectData)) {
      Objek?.keys(projectData)?.map((item: any, idx: number) => {
        const key: any = Object.keys(item).at(-1);
        setFieldValue(kunci, item[kunci]);
      });
    }
  }, [projectData]); // Tetapkan respons API

Answer 1

Anda perlu menetapkan enableReinitialize untuk membenarkan Formik mengemas kini nilai apabila ia berubah.

const form = useFormik({
    initialValues: ...,
    enableReinitialize: true //<-- 这里
});

Anda juga boleh menetapkan nilai terus dalam useEffect sekali gus.

useEffect(() => {
    if (projectData && .../*其他条件*/) {
        form.setValues(projectData)
    }
}, [projectData])

Answer 2

Jika struktur data yang diterima daripada API sepadan dengan struktur borang, anda boleh menggunakan kaedah setValues untuk menetapkan keseluruhan keadaan sekali gus.

Pastikan struktur data daripada respons API (struktur projectData）与您的initialValues sepadan.

Gunakan kaedah setValues untuk mengemas kini semua nilai sekali gus.

const form = useFormik({
  initialValues: {
    name: "",
    login: "",
    about: {
      age: "",
      rank: {
        silver: true,
        gold: false,
        global: false
      }
    }
  }
});

const { setValues } = form;

useEffect(() => {
  if (projectData) {
    setValues(projectData);
  }
}, [projectData]); // 设置来自API的响应