组件挂载后调用useObserver钩子实现无限分页报错求助

错误原因 #

你遇到的报错是因为加载器元素是条件渲染的：当!loading && !isSearched && limit <= data.length不满足时，<div ref={lastElement}>不会被渲染，此时lastElement.current为null，而IntersectionObserver.observe()方法要求必须传入合法的Element类型参数，因此触发错误。

解决方案 #

1. 修复useObserver钩子

修改钩子逻辑，确保仅当ref指向有效元素时才初始化观察者，同时处理闭包和内存泄漏问题：

export default function useObserver(ref, callback, dependencies) {
  const observer = useRef(null);

  useEffect(() => {
    // 仅当ref存在有效元素时才执行
    if (!ref.current) return;

    const observerCallback = (entries) => {
      if (entries[0].isIntersecting) {
        callback();
      }
    };

    // 创建观察者并观察目标元素
    observer.current = new IntersectionObserver(observerCallback);
    observer.current.observe(ref.current);

    // 清理函数：停止观察并销毁观察者
    return () => {
      if (observer.current) {
        observer.current.unobserve(ref.current);
        observer.current.disconnect();
        observer.current = null;
      }
    };
  }, [ref, callback, dependencies]); // 加入ref和callback到依赖，避免闭包问题
}

2. 优化组件中的条件渲染逻辑

保持现有条件渲染不变，同时更新钩子的依赖项，确保状态变化时能重新触发观察逻辑：

// 组件内代码
const lastElement = useRef(null);

const callback = () => {
  // 你的加载更多逻辑，比如更新limit、请求新数据
};

useObserver(lastElement, callback, [limit, data.length, loading, isSearched]);

return (
  <section>
    {/* 数据列表渲染 */}
    {data.map(item => (
      <div key={item.id}>{/* 你的列表项内容 */}</div>
    ))}
    
    {/* 条件渲染加载器 */}
    {!loading && !isSearched && limit <= data.length && (
      <div ref={lastElement}>
        <Loader />
      </div>
    )}
  </section>
);

关于“页面挂载后调用钩子”的问题 #

useEffect默认就在组件首次挂载完成后执行，但由于你的加载器是条件渲染，只有当条件满足时ref.current才会有值。修改后的useObserver钩子会自动监听ref的变化：当加载器元素挂载（ref.current变为有效Element）时，useEffect会重新执行并初始化观察者，无需额外手动调用。

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