React中Intersection Observer失效及forEach空值报错修复咨询

错误根源 #

1. DOM查询时机错误：组件顶层代码在DOM未挂载时执行，document.querySelector(".card")返回null，调用forEach触发报错。
2. 元素获取方式错误：querySelector仅返回第一个匹配元素，无法获取所有.card元素，无法实现批量监听。

修正后的代码 #

import { useRef, useEffect } from 'react';

export default function App() {
  const cardContainerRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          entry.target.classList.toggle("show", entry.isIntersecting);
          if (entry.isIntersecting) observer.unobserve(entry.target);
        });
      },
      { threshold: 1 }
    );

    // 获取所有card元素并转为数组
    const cards = Array.from(cardContainerRef.current.querySelectorAll(".card"));
    cards.forEach(card => observer.observe(card));

    // 组件卸载时清理监听
    return () => {
      cards.forEach(card => observer.unobserve(card));
    };
  }, []);

  return (
    <div className="App">
      <div className="card-container" ref={cardContainerRef}>
        <div className="card show">This is a First card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a Last card</div>
      </div>
    </div>
  );
}

关键修正点 #

• 使用useRef绑定card容器，确保DOM挂载后能安全访问子元素。
• 借助useEffect（空依赖数组）在DOM挂载完成后初始化Intersection Observer，避免过早执行DOM操作。
• 用querySelectorAll获取所有.card元素，通过Array.from转为数组后遍历监听。
• 添加清理函数，在组件卸载时停止所有元素的观察，防止内存泄漏。

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