如何将api的响应写入formik？

Question

如何将api的响应写入formik？ 我有一个用于接收数据的 api，该数据与我的表单完全一致，我如何立即编写整个响应，以免产生许多 setFieldValue 行？

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

  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]); // Set response api 

Answer 1

您必须设置

enableReinitialize

以允许Formik在更改时更新值。

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

您还可以直接在

useEffect

中一次设置值。

useEffect(() => {
    if (projectData && .../*Other conditions*/) {
        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]); // Set response from API