如何修复React中的'eslint(no-unused-vars)'错误？已配置相关ESLint插件

你遇到的问题核心是代码里存在两个同名的e参数，但其中一个（或两个）没有被实际使用，触发了ESLint的no-unused-vars规则。咱们先拆解下你的代码结构：

mouseMove = (e) => { 
  window.onmousemove = (e) => { 
    // ... 这里可能没用到内层的e，或者外层的e根本没被使用
  }; 
}

这里有两个e变量：一个是外层mouseMove函数的参数，另一个是内层window.onmousemove回调的箭头函数参数。ESLint会严格校验每个声明的变量是否被调用，只要其中一个没被用到，就会抛出错误提示。

针对不同场景的解决方案： #

• 如果外层的e完全用不上：直接删掉外层参数即可，简化代码：

  mouseMove = () => { 
    window.onmousemove = (e) => { 
      // 这里正常使用内层的e即可
    }; 
  }
  

• 如果内层的e没用到，但外层的e需要保留：可以给内层的e加下划线前缀（这是ESLint社区默认认可的「故意不使用变量」约定），或者直接删掉内层参数：

  // 方案1：用下划线标记未使用的参数
  mouseMove = (e) => { 
    window.onmousemove = (_e) => { 
      // ... 这里不需要用e的逻辑
    }; 
  }
  
  // 方案2：直接删掉内层未使用的参数
  mouseMove = (e) => { 
    window.onmousemove = () => { 
      // ... 这里不需要用e的逻辑
    }; 
  }
  

• 如果是你不小心遗漏了e的使用：在对应的函数体里加入对e的实际调用即可，比如：

  mouseMove = (e) => { 
    console.log('外层事件触发源：', e.target); // 使用外层的e
    window.onmousemove = (e) => { 
      console.log('鼠标实时位置：', e.clientX, e.clientY); // 使用内层的e
    }; 
  }
  

额外的React实践提醒： #

顺便提一句，在React组件中直接给window.onmousemove赋值的方式需要注意——当组件卸载时，记得移除这个监听，避免内存泄漏。比如在类组件的componentWillUnmount钩子中清理：

componentWillUnmount() {
  window.onmousemove = null;
}

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