使用反应无限滚动的 IntersectionObserver 不起作用

Question

由于某种原因，我的无限滚动不起作用。 当我使用按钮请求额外的页面时，它可以正常工作并根据需要加载所有额外的产品。 当我按下按钮一次并通过滚动到页面底部使用观察者进行无限滚动时，它只工作一次。

这是我的自定义钩子：

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

const client = algoliasearch(
  process.env.NEXT_PUBLIC_APPLICATION_ID,
  process.env.NEXT_PUBLIC_SEARCH_ONLY_API_KEY,
);
const index = client.initIndex(process.env.NEXT_PUBLIC_INDEX_NAME);

const useProducts = (query, pageNum) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [products, setProducts] = useState([]);

  const [showMore, setShowMore] = useState(false);
  useEffect(() => {
    setProducts([]);
  }, [query]);

  useEffect(() => {
    setLoading(true);
    setError(false);

    (async () => {
      try {
        const res = await index.search(query ? query : '', {
          hitsPerPage: 20,
          page: pageNum,
        });
        setProducts((prevProducts) => {
          return [...new Set([...prevProducts, ...res.hits])];
        });
        setShowMore(res.page < res.nbHits);
        setLoading(false);
      } catch (error) {
        setError(error);
      }
    })();
  }, [query, pageNum]);

  return [products, loading, error, showMore];
};
export default useProducts;

这是我的产品网格女巫位于我主页的底部：

import ProductCard from './ProductCard';
import { useRef, useEffect, useState} from 'react';
import styles from './ProductGrid.module.sass';
import useProducts from '../../hooks/useProducts';

const ProductGrid = () => {
  const sentinelRef = useRef(null);
  const [query, setQuery] = useState('');
  const [pageNum, setPageNum] = useState(0);
  const [products, loading, error, showMore] = useProducts(query, pageNum);
  useEffect(() => {
    if (loading) return;

    if (sentinelRef.current !== null) {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && showMore) {
            setPageNum((prevPageNum) => prevPageNum + 1);
          }
        });
      });
      observer.observe(sentinelRef.current);
      return () => {
        observer.disconnect();
      };
    }
  }, [loading, products, showMore]);

  const handleClick = () => {
    setPageNum((prevPage) => prevPage + 1);
  };
  return (
    <>
      <button onClick={handleClick}>test</button>

      <div className={styles._}>
        {products.map((hit) => (
          <ProductCard
            key={hit.objectID}
            name={hit.name}
            image={hit.image}
            price={hit.price}
          />
        ))}
      </div>
      <div ref={sentinelRef} aria-hidden='true' />
    </>
  );
};

export default ProductGrid;