React InfiniteScroll 与网格系统

Question

伙计们，怎么了？我有一个对象数组，我有网格容器，我通过数组映射并呈现网格项。一切都很好，除了所有的网格卡都同时渲染，而且我有一个长长的列表。所以，我决定添加 infiniteScroll 组件。但是所有的卡片仍然是同时渲染的。这是我 return 超出我的组件的内容：

<>
      {pokemonData ? (
        <>
          <InfiniteScroll
            dataLength={pokemonData.length}
            next={handleChangePage}
            hasMore={true}
            loader={<h4>Loading...</h4>}
            endMessage={
              <p style={{ textAlign: "center" }}>
                <b>Yay! You have seen it all</b>
              </p>
            }
          >
            <Grid container spacing={4} className={classes.pokemonCardsArea}>
              {pokemonData.map(
                (pokemon, index) =>
                  pokemon.name.includes(searchInputValue) && renderCards(index)
              )}
            </Grid>
          </InfiniteScroll>
        </>
      ) : (
        <CircularProgress
          color={"success"}
          className={classes.progress}
          size={200}
        />
      )}
</>

handleChangePage 函数只是将页面状态设置为 page + 1；而且我没有任何错误，只是呈现了一个完整的列表并正在加载...在它的底部。我没有找到任何关于确切的“下一个”功能应该是什么的信息。但是有人让它成为 setPage 函数，所以我也这样做了。一切都对他有用（他渲染图片，连续一张），但对我来说不行，我想是因为网格系统。有没有人成功地将 Infinite Scroll 实现到 MUI 网格系统？我没主意了，我睡不着）有人帮忙）

Answer 1

关于 InfiniteScroll + MUI 网格系统的信息不多，但我终于让它工作了。我离开了codesanbox sample for you here。不是那么漂亮，但它会给出如何实现它的想法。

React InfiniteScroll 与网格系统

React InfiniteScroll with Grid System

grid

infinite-scroll

reactjs

material-ui