如何將API的回應寫入Formik表單中？

Question

如何將API的回應寫入Formik？ 我有一個API，透過它我接收數據，這些數據與我的表單完全一致，我該如何立即將整個回應寫入，而不是使用多個setFieldValue行？

const form = useFormik({
        initialValues: {
          name: "",
          login: "",
          about: {
            age: "",
            rank: {
              silver: true,
              gold: false,
              global: false
            }
          }
        }
      }); // 我的初始表單

  const {
    values,
    handleChange,
    setFieldValue,
  } = form;

useEffect(() => {
    if (!isEmpty(projectData)) {
      Object?.keys(projectData)?.map((item: any, idx: number) => {
        const key: any = Object.keys(item).at(-1);
        setFieldValue(key, item[key]);
      });
    }
  }, [projectData]); // 設定API的回應

Answer 1

你需要設定enableReinitialize來允許Formik在更改時更新值。

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

你也可以在useEffect中一次直接設定值。

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

Answer 2

如果從API接收到的資料的結構與表單的結構相匹配，您可以使用setValues方法一次設定整個狀態。

確保來自API回應的資料結構（projectData）與您的initialValues的結構相符。

使用setValues方法一次更新所有值。

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的响应