React中scroll事件监听内pathname值无法更新的问题求助

这是典型的闭包陷阱：你的useEffect依赖数组是空的，组件挂载时只会绑定一次scroll事件，此时handleScroll函数捕获的是组件初始渲染时的pathname值。之后哪怕pathname更新了，这个旧的handleScroll里的pathname还是停留在初始状态，不会跟着变化。

下面给两种实用的修复方案：

方案一：更新依赖数组 + 用useCallback包裹事件函数 #

这种方法遵循React的依赖管理规则，确保每次依赖变化时，绑定的事件函数都是最新的：

1. 先用useCallback包裹handleScroll，把所有用到的外部变量都加入依赖数组，保证函数能捕获到最新的值：

const handleScroll = React.useCallback(() => {
  const urlKey = `/${section}/${url}`;
  if (pathname !== urlKey) {
    history.replace(urlKey);
  }
}, [pathname, section, url, history]);

2. 把handleScroll加入useEffect的依赖数组，这样每次依赖变化时，会先移除旧的监听器，再绑定新的：

React.useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, [handleScroll]);

方案二：用useRef保存最新的pathname #

这种方法避免了频繁解绑/绑定scroll事件，适合scroll这种高频触发的场景：

1. 创建一个ref来保存pathname的最新值，每次pathname更新时同步更新ref：

const pathnameRef = React.useRef(pathname);

React.useEffect(() => {
  pathnameRef.current = pathname;
}, [pathname]);

2. 修改handleScroll，直接读取ref的current值（永远是最新的pathname）：

const handleScroll = () => {
  const urlKey = `/${section}/${url}`;
  if (pathnameRef.current !== urlKey) {
    history.replace(urlKey);
  }
};

3. 最后把handleScroll用到的其他变量（section、url、history）加入useEffect的依赖数组：

React.useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, [section, url, history]);

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