React Hook useFormik顶层调用报错，移动代码后仍异常，求解决方案

核心问题 #

useFormik 属于React Hook，必须严格遵循Hook规则：只能在React函数组件内部或自定义React Hook函数内部的顶层调用，不能放在文件全局、普通函数、条件判断/循环语句里。

具体修复步骤 #

• 确认useFormik的调用位置，必须放在首字母大写的React函数组件内部：

import { useFormik } from 'formik';

// 正确：函数组件内部调用useFormik
function UserForm() {
  // 组件顶层调用Hook，不能嵌套在其他逻辑里
  const formik = useFormik({
    initialValues: { username: '', password: '' },
    onSubmit: (values) => {
      console.log(values);
    }
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        name="username"
        value={formik.values.username}
        onChange={formik.handleChange}
      />
      <button type="submit">提交</button>
    </form>
  );
}

• 若需复用Formik逻辑，封装为自定义Hook：

// 自定义Hook，必须以use开头
function useLoginFormik() {
  return useFormik({
    initialValues: { username: '', password: '' },
    onSubmit: (values) => {
      // 处理登录逻辑
    }
  });
}

// 在组件中使用自定义Hook
function LoginPage() {
  const formik = useLoginFormik();
  return <form onSubmit={formik.handleSubmit}>...</form>;
}

• 排查错误场景：
  • 禁止在文件全局层面调用useFormik
  • 禁止在if/for等条件、循环语句内调用Hook
  • 禁止在普通非Hook函数内调用useFormik

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