如何将 useFormik 的初始值设置为 API 请求返回的数据

Question

我有一个更新的 ProfilePage 组件，我想使用 useQuery 从 Axios API 请求接收到的数据预加载表单值，但似乎 useFormik initialValues 在请求完成之前渲染，因此初始值未定义，任何人都可以帮忙我 ？

  const { isSuccess, data } = useQuery("author", async () => {
    const endPoint = `${baseURL}/auth/author`;
    return Axios.get(endPoint, {
      headers: {
        "x-auth-token": token,
      },
    })
      .then(({ data }) => {
        return data.author;
      })
      .catch((err) => {
        setErrors(err.response.data.errors[0].msg);
        console.log(errors);
      });
  });

  const formik = useFormik({
    initialValues: {
      firstname: data.firstname,
      lastname: data.lastname,
      gender: data.gender,
      dob: data.dob,
      email: data.email,
      oldPassword: "",
      newPassword: "",
      confirmNewPassword: "",
      profilePic: "",
    },
    validationSchema: Yup.object({
      firstname: Yup.string()
        .max(20, "First Name must not be more that 20 characters")
        .required("Required*"),
      lastname: Yup.string()
        .max(20, "Last Name must not be more that 20 characters")
        .required("Required*"),
      gender: Yup.string().required("Required*"),
      dob: Yup.string().required("Required*"),
      email: Yup.string()
        .email("Must be a Valid Email Address")
        .required("Required*"),
      oldPassword: Yup.string().min(
        6,
        "Your password must be more than 6 characters"
      ),
      newPassword: Yup.string().min(
        6,
        "Your password must be more than 6 characters"
      ),
      confirmNewPassword: Yup.string(),
    }),
    onSubmit: (values) => {
      console.log(values);
    },
  });

我得到的错误是Cannot read properties of undefined (reading 'firstname') 如果我能找到一种方法让 useFormik 在 API 请求之后渲染它会有所帮助

Answer 1

为了克服 Formik 中的状态初始化问题，您可能需要使用 try enableReinitialize={true}。

例如：

const formik = useFormik({
    initialValues: ...,
    enableReinitialize: true,
    validationSchema: ...,
    onSubmit: (values) => {
        console.log(values);
    },
});

启用重新初始化默认为 false。它控制如果初始值更改（使用深度相等），Formik 是否应该重置表单。

https://formik.org/docs/api/formik

Answer 2

您可以通过使用加载组件来解决这个问题。在从服务器获取初始值时显示加载旋转器，并且当有效负载到达时，将其作为道具发送到表单组件。通过这种方式，您还可以避免向用户显示在随机时间后预先填写的空表单。