React组件非受控输入转受控警告问题排查及代码求助

核心问题1：切换表单时resetForm()执行时机错误 #

点击切换登录/注册按钮时，你先调用setPageType再执行resetForm()，但setPageType是异步更新状态的，执行resetForm()时isLogin仍为旧值，导致表单重置为旧页面类型的初始值。后续组件重新渲染，Formik加载新页面类型的初始值，部分字段（如注册页的picture、firstName）会从undefined变为确定值，触发“非受控输入转受控输入”的警告。

核心问题2：picture字段类型不匹配 #

你在initialValuesRegister里将picture初始化为空字符串""，但通过setFieldValue赋值的是File对象，同时Yup验证规则定义picture为字符串类型，这会导致：

• 验证始终失败（File对象不是字符串）
• 字段值在字符串和对象间切换，引发状态异常

修复步骤 #

1. 修正resetForm()执行逻辑 #

切换页面时，直接基于新页面类型指定重置的初始值，避免依赖旧状态：

<Typography
  onClick={() => {
    const newPageType = isLogin ? "register" : "login";
    setPageType(newPageType);
    resetForm({
      values: newPageType === "login" ? initialValuesLogin : initialValuesRegister
    });
  }}
  sx={{
    textDecoration: "underline",
    color: palette.primary.main,
    "&:hover": {
      cursor: "pointer",
      color: palette.primary.light,
    },
  }}
>
  {isLogin
    ? "Don't have an account? Sign Up here."
    : "Already have an account? Login here."}
</Typography>

2. 修正picture字段的类型与验证规则 #

调整初始值：

const initialValuesRegister = {
  firstName: "",
  lastName: "",
  email: "",
  password: "",
  location: "",
  occupation: "",
  picture: null, // 用null表示无文件，更符合语义
};

调整Yup验证规则：

const registerSchema = yup.object().shape({
  firstName: yup.string().required("required"),
  lastName: yup.string().required("required"),
  email: yup.string().email("invalid email").required("required"),
  password: yup.string().required("required"),
  location: yup.string().required("required"),
  occupation: yup.string().required("required"),
  // 验证是否为File对象且已上传
  picture: yup.mixed().required("必须上传图片").test(
    "fileExists",
    "必须上传图片",
    value => value instanceof File
  ),
});

调整渲染逻辑：

{!values.picture ? (
  <p>Add Picture Here</p>
) : (
  <FlexBetween>
    <Typography>{values.picture.name}</Typography>
    <EditOutlinedIcon />
  </FlexBetween>
)}

3. 可选：优化Formik配置的稳定性 #

用useMemo包裹Formik的初始值和验证规则，确保依赖变化时正确更新：

import { useMemo } from "react";

// 组件内部添加
const formikConfig = useMemo(() => {
  return {
    initialValues: isLogin ? initialValuesLogin : initialValuesRegister,
    validationSchema: isLogin ? loginSchema : registerSchema,
  };
}, [isLogin]);

// 替换Formik的属性传递方式
<Formik
  onSubmit={handleFormSubmit}
  {...formikConfig}
>
  {/* ...表单内容 */}
</Formik>

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