解决React Infinite Scroll组件无法加载后续数据的常见问题

本文旨在解决react应用中使用`react-infinite-scroll-component`时，数据仅首次加载而后续滚动不触发的问题。核心原因通常是组件未能正确检测到滚动事件，尤其是在父容器高度受限或滚动条不在`window`对象上时。解决方案是利用`scrollabletarget` prop，将其指向实际发生滚动的dom元素的id，从而确保无限滚动机制正常工作，提升用户体验。

在现代Web应用中，无限滚动（Infinite Scroll）是一种常见的用户体验模式，它允许用户在滚动页面时动态加载更多内容，而无需进行分页导航。react-infinite-scroll-component是一个流行的React库，用于实现这一功能。然而，开发者在使用过程中，有时会遇到一个令人困扰的问题：组件在首次加载数据后，即便继续滚动，也只会显示“Loading...”提示，而不会触发后续数据的加载。这通常发生在应用了新的样式或布局调整之后。

问题分析：为什么无限滚动会失效？

react-infinite-scroll-component的工作原理是监听滚动事件，并判断用户是否滚动到了容器的底部。当满足特定条件（如hasMore为true且滚动位置接近底部）时，它会调用next prop中传入的回调函数来加载更多数据。

导致无限滚动失效的主要原因通常是：

1. 滚动事件监听目标不正确： 默认情况下，react-infinite-scroll-component会监听window对象的滚动事件。如果你的内容是在一个具有固定高度并带有自身滚动条的容器内部进行滚动的，那么window上的滚动事件将不会触发，导致组件无法检测到滚动。
2. 父容器高度问题： 如果包含InfiniteScroll组件的父容器没有明确的高度限制或overflow: auto/scroll样式，那么即便内容很多，父容器也会随内容扩展，导致实际上并没有出现滚动条，自然也就无法触发滚动事件。

在问题描述的场景中，开发者提到在进行样式调整后出现此问题，这强烈暗示了问题与容器的尺寸或滚动行为有关。

解决方案：使用 scrollableTarget Prop

react-infinite-scroll-component 提供了一个名为 scrollableTarget 的 prop，专门用于解决上述问题。这个 prop 允许你指定一个具体的DOM元素的ID，作为无限滚动组件监听滚动事件的目标。

核心思想： 如果你的无限滚动内容是在一个具有独立滚动条的特定容器内部，而不是整个浏览器窗口滚动，那么你需要告诉 InfiniteScroll 组件去监听这个特定容器的滚动事件。

先见AI

数据为基，先见未见

95

查看详情

实现步骤

1. 识别实际的滚动容器： 确定你的无限滚动内容所在的父级DOM元素，该元素具有固定高度并设置了 overflow: auto 或 overflow: scroll 样式。
2. 为滚动容器设置ID： 给这个实际的滚动容器添加一个唯一的 id 属性。
3. 将ID传递给 scrollableTarget： 将该ID作为字符串值传递给 InfiniteScroll 组件的 scrollableTarget prop。

示例代码

假设你的无限滚动内容被包裹在一个 div 中，并且这个 div 是实际发生滚动的元素：

<!-- 这是一个具有固定高度和滚动条的容器 -->
<div id="scrollableDiv" style="height: 500px; overflow-y: auto;">
  <InfiniteScroll
    dataLength={getAllItemsInfinite.data?.pages.flatMap((page) => page.items).length ?? 0}
    next={getAllItemsInfinite.fetchNextPage}
    hasMore={!!getAllItemsInfinite.hasNextPage}
    loader={
      <h4 style={{ textAlign: "center", marginTop: "1rem" }}>
        Loading...
      </h4>
    }
    endMessage={
      getAllItemsInfinite.data?.pages[0]?.items.length !== 0 &&
      !getAllItemsInfinite.isLoading && (
        <p style={{ textAlign: "center" }}>
          <b>End of items.</b>
        </p>
      )
    }
    // 关键修复：指定滚动目标为 id="scrollableDiv" 的元素
    scrollableTarget="scrollableDiv"
  >
    <div
      className={cn(
        "m-2 flex flex-wrap justify-center gap-1 3xl:mx-auto ",
        {
          "m-4 gap-4": showingItemCards,
        }
      )}
    >
      {getAllItemsInfinite.isSuccess &&
        getAllItemsInfinite.data?.pages
          .flatMap((page) => page.items)
          .filter((item) => {
            // ... 过滤逻辑
            return true; // 简化示例
          })
          .map((item) =>
            showingItemCards ? (
              <ItemCard key={item.id} {...item} />
            ) : (
              <Item key={item.id} {...item} />
            )
          )}
    </div>
  </InfiniteScroll>
</div>

在上面的代码中，我们为外部的 div 容器添加了 id="scrollableDiv"，并将其传递给了 InfiniteScroll 组件的 scrollableTarget prop。这样，InfiniteScroll 组件就会监听这个 div 的滚动事件，而不是 window，从而正确触发后续数据的加载。

后端数据获取逻辑（保持不变）

后端数据获取逻辑通常不需要修改，只要它能正确地处理分页和提供 nextCursor 即可。以下是原问题中提供的后端逻辑示例，它展示了如何使用 cursor 进行分页：

const limit = 10;

getAllItemsInfinite: protectedProcedure
  .input(
    z.object({
      cursor: z.string().nullish(),
      householdId: z.string(),
    })
  )
  .query(async ({ ctx, input }) => {
    const { cursor, householdId } = input;
    const items = await ctx.prisma.item.findMany({
      cursor: cursor ? { id: cursor } : undefined,
      take: limit + 1, // 请求比 limit 多一项，用于判断是否有下一页
      orderBy: {
        name: "asc",
      },
      where: {
        householdId,
      },
    });

    // ... 省略了更新 expirationDate 和 expired 状态的逻辑，与分页无关 ...

    let nextCursor: typeof cursor | undefined = undefined;
    if (items.length > limit) {
      const nextItem = items.pop(); // 移除多请求的一项，并将其ID作为 nextCursor
      if (nextItem) nextCursor = nextItem?.id;
    }
    return {
      items,
      nextCursor,
    };
  }),

此后端逻辑确保了每次请求都能返回固定数量的数据，并提供了一个 nextCursor 来指示下一页的起始位置，这与 useInfiniteQuery 和 InfiniteScroll 的前端实现完美配合。

注意事项与最佳实践

• 确保 scrollableTarget 存在且可滚动： 在组件挂载时，scrollableTarget 所指向的DOM元素必须已经存在于DOM中，并且必须具有 overflow: auto 或 overflow: scroll 样式以及一个确定的高度，以便生成滚动条。如果目标元素不存在或不可滚动，InfiniteScroll 将无法正常工作。
• 避免ID冲突： 确保 scrollableTarget 使用的ID在整个页面中是唯一的。
• 条件渲染与 scrollableTarget： 如果你的 scrollableTarget 元素是条件渲染的，或者其ID在组件生命周期中可能发生变化，请确保在 InfiniteScroll 渲染时，scrollableTarget 的值是正确的。
• 性能考量： 尽管 react-infinite-scroll-component 已经做了很多优化，但在渲染大量列表项时，仍然需要注意列表虚拟化（如 react-window 或 react-virtualized）的结合使用，以进一步提升性能。

总结

当 react-infinite-scroll-component 出现仅加载首次数据，后续滚动不触发的问题时，最常见的原因是组件未能正确识别滚动事件的监听目标。通过为实际的滚动容器设置一个唯一的ID，并将其值传递给 InfiniteScroll 组件的 scrollableTarget prop，可以有效地解决这一问题。理解 InfiniteScroll 的工作原理及其与DOM滚动行为的交互，是确保其在各种布局和样式下正常运行的关键。

以上就是解决React Infinite Scroll组件无法加载后续数据的常见问题的详细内容，更多请关注php中文网其它相关文章！