繁体   English   中英

如何使用React Hooks实现无限滚动?

How to implement infinite scrolling with React Hooks?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在设置一个React Web应用程序,该应用程序请求图像的URL,然后将其显示在图库(如Google Photos)中。 我担心性能(前端和后端),这就是为什么我尝试实现无限滚动的原因。 该应用程序还应该支持在不同用户的画廊之间切换。

我能够实现对用户画廊的选择。 挂载时,它会请求最初选择的用户的URL并显示图像。 当选择另一个用户时,它将删除有关现在的旧用户设置新用户的当前状态,该新用户将再次触发第一个useEffect挂钩。

查看代码时我的问题变得很清楚:

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检查用户是否滚动足够远,以供我们请求并显示下一批图像。

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

问题暂未有回复.您可以查看右边的相关问题.
1 使用 Hooks 在 React 中重新渲染时停止/防止滚动到顶部(需要实现无限滚动)

我正在尝试使用React Hooks设置无限滚动,我从节点后端正确获取数据(每个请求 3 个数据集),并且当我滚动时,新数据也正确添加到数组中(在加载位置状态),但是页面在重新渲染时返回顶部,我需要防止这种行为。 我如何防止这种情况,下面是我的代码 任何帮助都受到高度赞赏 ...

2 是否有一个带有useEffect的无限滚动的实现,它不会触发react-hooks / exhaustive-deps lint警告?

我正在使用React钩子实现无限滚动式解决方案。 下面的代码显示什么,我试图完成和工作的例子可以在codesandbox可以看出这里 。 我在useEffect收到exhaustive-deps警告,因为我没有将data列为依赖项(这显然会导致无限循环)。 有没有办法实现这种无限滚动解 ...

4 在 React 上使用 Algolia 实现无限滚动

我正在尝试在我的 React 应用程序上实现无限滚动以搜索来自 Algolia 的搜索结果。 我在他们的文档中遇到了一个类组件。 我使用 React Hooks 所以试图让它在 React Hooks 上工作。 我得到的只是这么多渲染,当这个组件挂载时,我的应用程序就挂了。 这是我的代码: ...

8 如何在使用 Hooks 的 React 中防止无限循环

我正在处理一个 React 项目,因为我有两个按钮,我将状态和功能应用于两个按钮,但它显示这样的错误。 请帮我解决这个问题。 它显示这样的错误 Error: Too many re-renders。 React 限制渲染次数以防止无限循环。 这是我的代码 App.js ...

2021-07-16 14:07:57 2 41   reactjs
10 如何在React和Redux中实现无限滚动?

这是我想在其中创建无限滚动的组件,下面是我与axios的交互操作: 我想创建一个滚动。 我首先需要显示前10个元素,然后在每次加载时添加5个元素。 我一共有25个元素,当列表完成后,它应该再次从前五个元素开始。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM