react-infinite-scroll-component 重置滚动位置答案

【问题标题】：react-infinite-scroll-component resets scroll positionreact-infinite-scroll-component 重置滚动位置
【发布时间】：2022-11-07 21:02:02
【问题描述】：

我正在使用react-infinite-scroll-component 和Mantine's Select 组件，并且遇到了一个问题。基本上每当加载新数据时，滚动条都会一直重置到顶部，正如您可以想象的那样，这在 UX 方面非常烦人。

有谁知道为什么会这样？在检查 DOM 时，似乎无限滚动组件由于某种原因完全重新渲染。

你可以在这个 gif 中看到我的意思：

【问题讨论】：

标签： reactjs

【解决方案1】：

我几乎可以肯定您正在使用某种状态进行检查。我会给你一个真正糟糕的例子和解决方案。

无效的坏例子：

const hasData = !isLoading && postsResp?.content?.length;

{!hasData && (
        <InfiniteScroll
          dataLength={postsResp?.content?.length}
          next={() => getContentFeed(true)}
          hasMore={!postsResp?.last}
          loader={(
            <Skeleton
              variant='text'
              width={120}
              height={24}
              sx={{ margin: 'auto' }}
            />
          )}
        >
          {postsResp?.content?.map((post: Content) => (
            <Post key={`post_${post.uuid}+${Math.random()}`} post={post} />
          ))}
        </InfiniteScroll>
      ) : (
        'No posts'
      )}

这是一个效果很好的：我知道您注意到我已经将检查是否有数据移到了其他地方。我这样做是因为每次这个状态都用新值更新并重新渲染我的组件。这就是为什么每次滚动都在顶部的原因。

 {(!hasData && !isLoading) && (
        'No posts'

      )}
      <InfiniteScroll
        dataLength={postsResp?.content?.length ?? 0}
        next={() => getContentFeed(true)}
        hasMore={!postsResp?.last}
        loader={(
          <Skeleton
            variant='text'
            width={120}
            height={24}
            sx={{ margin: 'auto' }}
          />
        )}
      >
        {postsResp?.content?.map((post: Content) => (
          <Post key={`post_${post.uuid}+${Math.random()}`} post={post} />
        ))}
      </InfiniteScroll>

这里的主要思想是记住不要根据可以重新渲染组件的无限滚动更新任何状态。

【讨论】：