React组件卸载时保存scrollTop遇myRef为null的问题求助

你遇到的问题是组件卸载时myRef.current已经变为null——因为DOM元素已被移除，无法再获取其scrollTop值。可以通过以下两种可靠方法解决：

方法一：实时监听滚动事件，保存滚动位置到状态 #

这种方式会在用户滚动时实时把滚动位置存入状态，组件卸载时直接使用状态值保存到数据库，彻底避免卸载时访问已失效的ref。

import { useState, useEffect, useRef } from 'react';

function ScrollableComponent() {
  const scrollRef = useRef(null);
  const [currentScrollTop, setCurrentScrollTop] = useState(0);

  // 监听滚动事件，实时更新滚动位置
  useEffect(() => {
    const handleScroll = () => {
      if (scrollRef.current) {
        setCurrentScrollTop(scrollRef.current.scrollTop);
      }
    };

    const targetElement = scrollRef.current;
    if (targetElement) {
      targetElement.addEventListener('scroll', handleScroll);
    }

    // 清理监听事件
    return () => {
      if (targetElement) {
        targetElement.removeEventListener('scroll', handleScroll);
      }
    };
  }, []);

  // 组件卸载时保存最终的滚动位置
  useEffect(() => {
    return () => {
      saveToDb(currentScrollTop);
    };
  }, [currentScrollTop]);

  return (
    <div 
      ref={scrollRef} 
      style={{ 
        overflowY: 'auto', 
        height: '500px',
        border: '1px solid #eee' 
      }}
    >
      {/* 你的社交媒体内容，比如动态列表 */}
    </div>
  );
}

方法二：卸载前立即获取滚动位置（针对特定场景） #

如果不想实时监听，也可以尝试在组件卸载前的瞬间获取ref值。使用useLayoutEffect替代useEffect，它的清理函数会在DOM更新前执行（仍需注意极端场景下ref可能为null的情况）：

import { useRef, useLayoutEffect } from 'react';

function ScrollableComponent() {
  const scrollRef = useRef(null);

  useLayoutEffect(() => {
    return () => {
      if (scrollRef.current) {
        saveToDb(scrollRef.current.scrollTop);
      }
    };
  }, []);

  return (
    <div ref={scrollRef} style={{ overflowY: 'auto', height: '500px' }}>
      {/* 你的内容 */}
    </div>
  );
}

注意事项 #

• 确保scrollRef正确绑定到目标滚动div，JSX中必须写ref={scrollRef}。
• 方法一的实时监听是更稳妥的方案，不受组件卸载时机影响，能保证获取到最后一次滚动的位置。

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