React路由切换时重置Formik表单的ESLint依赖问题求解

以下是几种无需关闭ESLint规则的可行方案：

方案1：用useRef缓存Formik组件实例 #

通过useRef存储Formik实例，避免直接依赖formik对象引发的循环问题，同时满足ESLint的依赖检查要求。

import { useEffect, useRef } from 'react';
import { Formik } from 'formik';
import { useLocation } from 'react-router-dom';

function YourForm() {
  const formikRef = useRef(null);
  const location = useLocation();

  useEffect(() => {
    if (formikRef.current) {
      formikRef.current.resetForm();
    }
  }, [location]);

  return (
    <Formik
      ref={formikRef}
      initialValues={{ username: '', email: '' }}
      onSubmit={(values) => console.log(values)}
    >
      {/* 表单字段 */}
    </Formik>
  );
}

说明：useRef创建的引用在组件生命周期内保持稳定，不会随渲染更新。仅监听location变化触发重置，既解决了ESLint的依赖缺失警告，又避免了因formik对象引用变化导致的无限循环。

方案2：缓存resetForm函数引用（适用于useFormik钩子） #

如果使用useFormik钩子初始化Formik，可以通过useRef缓存resetForm函数，确保仅在路由切换时执行重置。

import { useEffect, useRef } from 'react';
import { useFormik } from 'formik';
import { useLocation } from 'react-router-dom';

function YourForm() {
  const location = useLocation();
  const formik = useFormik({
    initialValues={{ username: '', email: '' }}
    onSubmit={(values) => console.log(values)}
  });

  const resetFormRef = useRef(null);

  // 同步resetForm的最新引用
  useEffect(() => {
    resetFormRef.current = formik.resetForm;
  }, [formik.resetForm]);

  // 路由切换时调用重置
  useEffect(() => {
    resetFormRef.current?.();
  }, [location]);

  return (
    {/* 表单字段，使用formik.getFieldProps等方法 */}
  );
}

说明：第一个useEffect仅在formik.resetForm的引用变化时更新缓存，第二个useEffect仅响应location变化。这种方式既符合ESLint的依赖要求，又避免了无限循环。

方案3：React 18+ 使用useEvent创建稳定函数 #

React 18新增的useEvent钩子可以创建引用稳定的事件函数，无需担心依赖变化导致的重触发。

import { useEffect, useEvent } from 'react';
import { useFormik } from 'formik';
import { useLocation } from 'react-router-dom';

function YourForm() {
  const location = useLocation();
  const formik = useFormik({
    initialValues={{ username: '', email: '' }}
    onSubmit={(values) => console.log(values)}
  });

  // 创建稳定的重置函数
  const handleReset = useEvent(() => {
    formik.resetForm();
  });

  useEffect(() => {
    handleReset();
  }, [location, handleReset]);

  return (
    {/* 表单字段 */}
  );
}

说明：useEvent返回的函数引用始终稳定，即使内部依赖的formik.resetForm变化，外部的handleReset也不会改变。useEffect仅依赖location和稳定的handleReset，不会触发无限循环，同时满足ESLint规则。

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