React中useEffect内else语句带大括号引发removeEventListener参数错误问题排查

首先要明确：你遇到的**TypeError错误和else语句的大括号完全无关**，这个报错的真正原因是removeEventListener的调用方式不正确，只是你测试时的巧合让你误以为是大括号的问题。

错误的核心原因 #

window.removeEventListener()方法要求必须传入两个参数：

• 事件名称（比如'scroll'）
• 要移除的回调函数的引用（必须和addEventListener时传入的是同一个函数对象）

你的代码里的清理函数只传了第一个参数：

return () => {
  window.removeEventListener('scroll'); // ❌ 缺少第二个参数：回调函数
};

这才是触发TypeError: Failed to execute 'removeEventListener' on 'EventTarget': 2 arguments required的直接原因。

为什么你觉得else大括号会影响？ #

这大概率是测试时的巧合：

• 当你写else handleShow(false);时，可能组件没有触发卸载（比如没切换路由、没销毁组件），所以清理函数根本没执行，自然没暴露这个错误；
• 当你给else加上大括号后，可能刚好触发了组件卸载（比如做了页面跳转），清理函数执行，才暴露出removeEventListener的参数错误。

正确的写法 #

要解决这个问题，你需要把scroll回调函数抽成独立变量，保证addEventListener和removeEventListener使用同一个函数引用，同时正确传递参数：

useEffect(() => {
  // 抽成独立函数，保证引用一致
  const handleScroll = () => {
    if (window.scrollY > 100) {
      handleShow(true);
    } else {
      handleShow(false); // 这里加不加大括号都没问题
    }
  };

  window.addEventListener('scroll', handleScroll);
  
  // 清理时传入同一个回调函数引用
  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, [handleShow]); // 注意：如果handleShow是外部定义的函数，要加入依赖数组，避免闭包问题

额外提醒 #

• 不要忽略useEffect的依赖数组：如果handleShow是组件内的函数（比如用useCallback包裹的），一定要把它加入依赖数组，否则可能出现闭包导致的状态更新不及时问题；
• 如果你希望scroll事件回调的性能更好，可以考虑用throttle或者debounce来限制触发频率，避免频繁执行handleShow。

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