使用Formik提交表单时出现受控转非受控输入警告的排查求助

1. 修复路由跳转未终止组件渲染的问题 #

代码顶部判断用户已登录（session存在）时，执行路由跳转后未立即终止组件渲染，导致表单在跳转过程中仍会渲染，触发Formik状态异常。修改如下：

if (session) {
  const router = useRouter()
  router.push('/')
  return null // 终止后续渲染，避免状态冲突
}

2. 移除冗余的字段重置逻辑 #

finally块中重复设置密码类字段为初始值完全多余——formik.resetForm()已经将所有字段重置为initialValues，重复操作可能引发状态更新冲突，直接删除这段代码：

// 删除以下冗余代码
formik.setFieldValue('user.password', formik.initialValues.user.password, false)
formik.setFieldValue('user.passwordConfirmation', formik.initialValues.user.passwordConfirmation, false)
formik.setFieldValue('user.pin', formik.initialValues.user.pin, false)
formik.setFieldValue('user.pinConfirmation', formik.initialValues.user.pinConfirmation, false)

3. 验证错误结构的匹配性 #

检查yupToFormErrors(error)转换后的错误对象是否与Formik的嵌套values结构一致。如果后端返回的ValidationError是扁平路径（如"company.website": "无效值"），但转换后未生成嵌套结构（{ company: { website: "无效值" } }），会导致Formik错误状态异常，进而影响输入控件。需确保错误字段路径与表单name属性完全对应，必要时手动转换错误结构。

4. 兜底确保输入值永远不为undefined #

为所有输入控件的value添加兜底处理，避免因意外状态变化导致值变为undefined：
例如将value={formik.values.company.website}修改为value={formik.values.company.website || ''}，确保始终传递字符串类型的值。

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