尝试将intersectionObserver初始化 Package 在useEffect中。
例如：

export default function App() {

  React.useEffect(() => {
    const card = document.querySelector(".card");
    const ob = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          entry.target.classList.toggle("show", entry.isIntersecting);
          if (entry.isIntersecting) ob.unobserve(entry.target);
        });
      },
      { 
        threshold: 1
      }
    );
    card.forEach((card) => {
      ob.observe(card);
    });
   }, []);
  

  return (
    <div className="App">
      <div className="card-container">
        <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>
  );
}

你不应该在React中的效果之外使用document，在这个特定的例子中，你在document.querySelector上得到了null，因为当你调用它时，这些元素还没有被挂载。
你可以通过将所有东西都移动到useEffect钩子中来轻松解决这个问题，但是在React中使用document.querySelector仍然很奇怪，因为你基本上绕过了它。
尽管在这种情况下这是有争议的。根据上下文，这些卡片可能来自API调用（因为它们看起来像一个数组），或者你可以手动创建一个常量数组，其中包含组件外部所需的数据。这个想法是能够使用.map来迭代它们。
关键是这并不总是可行的。这些卡片可能是着陆页的独立静态部分，具有完全不同的形状和组件，在这种情况下，您有两种方法：

• 一种是在容器上添加一个ref，并在效果中迭代其子节点（而不是使用document.querySelector，您将使用ref.current.children）。
• 另一种是像您正在做的那样，使用某种查询选择器。