如何使用 React Hooks 實現無限滾動？

Question

我正在設置一個 React web 應用程序，它請求圖像的 URL，然后將它們顯示在一個畫廊（如谷歌照片）中。 我擔心性能（前端和后端），這就是我嘗試實現無限滾動的原因。 該應用程序還應該支持在不同用戶的畫廊之間切換。

我能夠實現用戶畫廊的選擇。 在掛載時，它會請求最初選擇的用戶的 URL 並顯示圖像。 選擇另一個用戶時，它會刪除當前的state關於現在舊用戶設置的新用戶，該新用戶再次觸發了第一個使用效果掛鈎。

查看代碼時，我的問題變得清晰：

const Gallery = () => {
  const [user, setUser] = useState('user1');
  const [stories, setStories] = useState([]);
  const [loadedAll, setLoadedAll] = useState(false);
  const [loading, setLoading] = useState(true);
  const galleryRef = useRef(null);
  const loadedAmount = useRef(0);

  useEffect(() => {
    let didCancel = false;

    async function fetchData() {
      setLoading(true);

      const query = `/api/v1/stories/part/${user}?limit=${20}&skip=${loadedAmount.current}&sortBy=uploadedAt_desc`;
      const result = await axios.get(query);
      const count = result.data.length;

      const transformedStories = result.data.map((story) => ({
        ...story,
        width: story.width || 1080,
        height: story.height || 1920,
      }));

      if (!didCancel) {
        setStories((currentStories) => [
          ...currentStories,
          ...transformedStories,
        ]);
        loadedAmount.current += count;

        if (count < 20) {
          setLoadedAll(true);
        }

        setLoading(false);
      }
    }

    fetchData();

    return () => {
      didCancel = true;
      setStories([]);
      loadedAmount.current = 0;
      setLoadedAll(false);
    };
  }, [user]);

  useEffect(() => {
    const handleScroll = (evt) => {
      const scroller = galleryRef.current;
      const loadTreshold = 500;
      const shouldLoad =
        window.innerHeight + window.scrollY >=
        scroller.clientHeight + scroller.offsetTop - loadTreshold;

      if (shouldLoad) {
        //
        // Load next batch.
        //
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);


   return (
      ...
   );
}

如何重構我的代碼，以便在handleScroll成功時加載下一批圖像？ handleScroll檢查用戶滾動的距離是否足以讓我們請求並顯示下一批圖像。

感謝您的幫助，我現在真的很困惑。