如何将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的响应