React使用Formik时出现Invalid hook call报错求助

你已排除React与React DOM版本不匹配的问题，可按以下优先级逐一排查修复：

1. 优先排查Hooks调用规则违反问题（90%新手触发该报错的原因） #

useFormik是React Hook，必须严格遵守Hook调用规则，以下是Formik新手最常写的错误写法：

• 将useFormik写在类组件、普通工具函数、组件外全局作用域中
• 将useFormik包裹在if条件判断、for/while循环、事件回调、嵌套子函数内部，没有放在函数组件/自定义Hook的顶层作用域

错误代码示例：

// 错误1：封装在普通工具函数中调用
const getFormConfig = () => {
  // Hook不在组件/自定义Hook顶层调用
  const formik = useFormik({ initialValues: { username: '' } })
  return formik
}

const UserForm = () => {
  const formik = getFormConfig()
  return <form onSubmit={formik.handleSubmit}></form>
}

// 错误2：放在条件判断内调用
const UserForm = ({ isEdit }) => {
  if (isEdit) {
    // 条件分支内调用Hook违反规则
    const formik = useFormik({ initialValues: { username: '' } })
  }
  return <form></form>
}

// 错误3：组件外全局直接调用
// 不在函数组件内部调用
const formik = useFormik({ initialValues: { username: '' } })
const UserForm = () => {
  return <form onSubmit={formik.handleSubmit}></form>
}

修复方案：将useFormik的调用直接移动到函数组件的最顶层作用域，不要被任何逻辑分支、嵌套函数包裹。

2. 排查项目内多React副本问题 #

package.json中标注的版本一致不代表node_modules中不存在多份React副本，执行以下命令校验依赖树：

npm ls react

如果输出结果中存在多个react条目（例如formik依赖目录下嵌套了独立版本的react），就会触发Hook调用报错。
修复步骤：

• 删除项目根目录下的node_modules文件夹与package-lock.json文件，重新执行npm install重装依赖
• 若重装后仍存在多副本问题，在package.json中添加overrides配置，强制全项目依赖使用同一份React：

{
  "overrides": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

保存配置后重新执行npm install即可。

3. 校验Formik版本兼容性 #

确认本地安装的Formik版本为兼容React 18的2.x/3.x版本，过旧的1.x版本会因依赖引用逻辑问题触发Hook报错，执行以下命令升级到最新稳定版：

npm install formik@latest

所有修改完成后，重启本地开发服务、清空浏览器缓存后再验证报错是否消失。

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