设置Redux/toolkit状态时页面自动上滚，如何解决？

可能成因 #

• 组件重挂载：状态更新触发了组件的卸载与重新挂载（比如组件key属性不稳定、路由意外切换），浏览器会默认将滚动位置重置到顶部。
• 意外的滚动代码：与该Redux action关联的逻辑中（action创建器、reducer、middleware或组件useEffect），存在window.scrollTo、document.documentElement.scrollTop = 0这类主动触发滚动的代码，或是第三方库带来的副作用。
• 页面高度突变：状态更新后，页面元素高度发生大幅变化（比如条件渲染的元素突然显示/隐藏），浏览器自动调整滚动位置以适配新的页面高度。

解决办法 #

• 稳定组件key：确保组件的key使用固定标识（如数据ID），避免用随机值、时间戳这类每次更新都会变化的变量，防止组件无故重挂载。
• 排查滚动代码：全局搜索与该Redux action相关的代码，检查是否存在主动触发滚动的逻辑，移除或修改这类代码；同时排查依赖的第三方UI库，确认是否是库内逻辑导致的滚动。
• 优化组件渲染：用React.memo包裹纯组件，用useMemo缓存计算结果、useCallback缓存回调函数，减少不必要的重渲染，避免因频繁渲染引发的滚动问题。
• 处理页面高度变化：给高度易变的容器设置固定高度或添加overflow: auto样式，将滚动限制在容器内部，避免影响全局滚动位置。
• （路由场景）恢复滚动位置：如果是路由组件受影响，可通过useLocation配合useEffect手动保存和恢复滚动位置：

  import { useLocation } from 'react-router-dom';
  import { useEffect } from 'react';
  
  function App() {
    const location = useLocation();
  
    useEffect(() => {
      const scrollPosition = sessionStorage.getItem(`scroll-${location.pathname}`);
      if (scrollPosition) {
        window.scrollTo(0, parseInt(scrollPosition));
      }
    }, [location.pathname]);
  
    useEffect(() => {
      sessionStorage.setItem(`scroll-${location.pathname}`, window.scrollY.toString());
    }, [location.pathname]);
  
    // ...组件其余逻辑
  }
  

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