如何使用 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检查用户滚动的距离是否足以让我们请求并显示下一批图像。

感谢您的帮助，我现在真的很困惑。