如何解决及预防useFormik相关API的@typescript-eslint/unbound-method错误？

我明白你升级TypeScript ESLint插件后遇到的困扰——明明是照着Formik文档写的代码，却触发了这个unbound-method错误。别担心，这其实是规则的误报，咱们一步步解决它。

为什么会出现这个错误？ #

@typescript-eslint/unbound-method规则的初衷是防止你直接解构类的实例方法（这类方法依赖this，解构后会丢失正确的上下文）。但Formik的useFormikContext()返回的是一个普通对象，里面的setFieldTouched等方法已经被Formik内部正确绑定了this，完全不存在上下文丢失的问题，所以这里是规则误判了。

几种可行的解决方法 #

1. 行内禁用规则（最快最精准）

直接在解构代码的上一行添加ESLint注释，临时禁用这一行的规则：

// eslint-disable-next-line @typescript-eslint/unbound-method
const { setFieldTouched } = useFormikContext();

这种方法不会影响其他代码，适合只在少数地方出现这个问题的场景。

2. 避免直接解构，保留上下文对象

如果你不想加注释，可以先获取完整的上下文对象，调用方法时通过对象访问：

const formik = useFormikContext();

// 调用时这样写
formik.setFieldTouched('yourFieldName', true);

这样就不会触发规则，因为你没有把方法从它的上下文里单独抽离出来。

3. 全局调整ESLint规则（适合大量场景）

如果你的项目里很多地方都用到了Formik的这种解构写法，可以在ESLint配置文件（比如.eslintrc.js）里修改规则：

module.exports = {
  // ...其他配置
  rules: {
    '@typescript-eslint/unbound-method': [
      'error',
      {
        ignoreStatic: true,
        // 若大量场景遇到此问题，也可暂时将规则级别设为warn
        // 'warn'
      }
    ]
  }
};

不过更推荐前两种方法，因为全局调整可能会漏掉真正需要检测的类方法绑定问题。

如何防止后续出现类似错误？ #

• 区分场景：当你解构的是类实例的方法时，规则的提醒是有用的，要注意this绑定；但如果是像Formik hooks返回的、已经被内部绑定好的函数，就可以放心用行内注释禁用规则。
• 备选写法：如果不确定解构的方法是否绑定了this，优先保留上下文对象再调用方法，避免触发规则。

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