React事件监听器在Netlify生产环境失效，本地运行正常该如何解决？

问题排查及解决方案 #

1. 优先修复useEffect清理函数的语法错误 #

你当前的代码写法存在语法问题：useEffect需要返回一个函数作为卸载时的清理逻辑，而你直接返回了removeEventListener的执行语句，会导致组件挂载完成后立刻解绑刚绑定的事件。
本地开发能运行大概率是React 18严格模式的二次挂载逻辑刚好掩盖了这个问题，生产环境严格模式默认关闭，所以事件绑定后立刻被移除，自然没有响应。
修复后的代码如下：

useEffect(() => {
  document.addEventListener('keyup', keyboardInputHandler);
  // 清理逻辑必须包裹在函数内，组件卸载时才会执行
  return () => {
    document.removeEventListener('keyup', keyboardInputHandler);
  };
}, [])

2. 修复函数引用和依赖问题 #

如果keyboardInputHandler定义在useEffect外部，必须用useCallback包裹，避免每次组件渲染生成新的函数引用，导致解绑时找不到对应监听，或者函数内部依赖的state不更新：

// 用useCallback缓存函数引用，依赖项填写函数内部用到的所有state/prop
const keyboardInputHandler = useCallback((e) => {
  // 你的键盘输入处理逻辑
}, [/* 函数依赖的状态，例如输入值、计算结果等 */])

useEffect(() => {
  document.addEventListener('keyup', keyboardInputHandler);
  return () => {
    document.removeEventListener('keyup', keyboardInputHandler);
  };
}, [keyboardInputHandler]) // 把处理函数加入effect依赖

3. 排查事件冒泡拦截问题 #

如果上述修复后仍无效，可在生产环境打开控制台执行以下测试代码，验证全局keyup事件是否能触发：

document.addEventListener('keyup', () => console.log('全局keyup事件触发'))

• 如果控制台无输出：说明你的页面内有其他元素调用了e.stopPropagation()阻止了keyup事件冒泡到document，检查是否有输入框、弹窗等组件的事件拦截逻辑。
• 如果控制台有输出：说明你的处理函数内部逻辑存在问题，可在函数内加console日志定位是否被执行。

4. 验证生产构建逻辑 #

先在本地执行生产构建命令（通常是npm run build），再用静态服务启动构建产物（例如执行npx serve -s build），验证本地生产包是否能复现问题：

• 本地可复现：问题出在代码逻辑，继续排查即可。
• 本地不可复现：问题出在Netlify的构建配置，检查Netlify的构建命令、环境变量、压缩优化配置是否和本地一致，是否开启了额外的tree shaking配置误删了事件绑定代码。

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