Formik无法通过API请求初始化表单值的问题

核心错误分析 #

你代码里的关键问题是Formik的initialValues赋值错误：

initialValues: { initialValues },

这会把表单初始值设置成一个嵌套对象{ initialValues: {...你的实际值} }，而不是直接使用state中存储的表单结构，导致Formik无法正确识别字段。

修复步骤 #

1. 给initialValues State设置合理默认值
   避免初始为null导致第一次渲染时Formik没有可用的初始值，改成和表单结构匹配的空对象：

   const [initialValues, setInitialValues] = useState({
     name: "",
     bio: "",
     email: "",
     country: { name: "", code: "" },
     date: null
   });
   

2. 修正Formik的initialValues赋值
   直接使用state变量，不要额外包裹对象：

   const formik = useFormik({
     initialValues: initialValues, // 这里直接用变量，不是{ initialValues }
     enableReinitialize: true,
     // ... 其他配置
   });
   

3. 优化useEffect的依赖（可选）
   建议把用到的user.username、setCountries等加入依赖数组，避免闭包问题：

   useEffect(() => {
     countryservice.getCountries().then((data) => setCountries(data));
     api.post("/api/profile", { username: user.username }).then((response) => {
       setInitialValues({
         name: "test",
         bio: "my bio text",
         email: "me at email",
         country: { name: "Australia", code: "AU" },
         date: null // 补充date字段，和validationSchema对应
       });
     });
   }, [user.username, setCountries]);
   

完整修正后的代码 #

import { useState, useEffect } from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

// 假设其他依赖已导入：countryservice、api、signupUser、user等

const YourComponent = () => {
  const [countries, setCountries] = useState([]);
  const [initialValues, setInitialValues] = useState({
    name: "",
    bio: "",
    email: "",
    country: { name: "", code: "" },
    date: null
  });

  useEffect(() => {
    countryservice.getCountries().then((data) => setCountries(data));
    api.post("/api/profile", { username: user.username }).then((response) => {
      console.log(response.data);
      setInitialValues({
        name: "test",
        bio: "my bio text",
        email: "me at email",
        country: { name: "Australia", code: "AU" },
        date: null
      });
    });
  }, [user.username, setCountries]);

  const formik = useFormik({
    initialValues: initialValues,
    enableReinitialize: true,
    validationSchema: Yup.object({
      name: Yup.string().required("Name is required"),
      email: Yup.string()
        .email("Invalid email address")
        .required("Email is required"),
      date: Yup.date().required("Date is required").nullable(),
      country: Yup.object({
        name: Yup.string(),
        code: Yup.string(),
      }).required("Country is required"),
    }),
    onSubmit: (data) => {
      signupUser(data);
    },
  });

  // 组件渲染逻辑...
};

export default YourComponent;

额外说明 #

• enableReinitialize: true的作用是当initialValues变化时，Formik会重新初始化表单，所以确保API返回后setInitialValues能正确更新state即可触发重新初始化。
• 注意补充date字段到初始值中，和你的validationSchema对应，避免初始时出现验证错误。

内容的提问来源于stack exchange，提问作者user1768233