使用网格系统响应 InfiniteScroll

Question

发生什么事了，伙计们？我有一个对象数组，我有网格容器，我通过数组进行映射并渲染网格项目。一切都很好，除了所有网格卡同时渲染并且我有一个很长的列表。所以，我决定添加infiniteScroll组件。但所有卡片仍然同时渲染。这是我从组件中返回的内容：

<>
      {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 函数，所以我也做了同样的事情。一切都适合他（他渲染图片，连续一张），但不适合我，我想是因为网格系统。有人曾经成功地在 MUI 网格系统中实现过无限滚动吗？我没有主意，我无法入睡）有人帮忙）

Answer 1

关于 InfiniteScroll + MUI 网格系统的信息并不多，但我终于能够让它工作了。我在这里为您留下了codesanbox 示例。不是那么漂亮，但它会给出如何实现它的想法。