json ReactJS中的无限滚动

du7egjpx 于 2023-08-08 发布在 React

关注(0)|答案(1)|浏览(143)

我应该在reactJs中创建一个无限滚动，其中包含一个包含数据的JSON。你能帮帮我吗？
我想从头开始，而不是与一些库

{data?.map((conto) => {

  return (
    <Suspense key={conto._uid} fallback={<p>Loading...</p>}>
      <Conto blok={conto} data={data} ITEuro={ITEuro} deposit={deposit} handleToggleFavourite={handleToggleFavourite} isFavourited={isFavourited} depositQuantity={depositQuantity} />
    </Suspense>
  )

})}

字符串
我现在这样加载的JSON，但我想一个ID的最大数量被加载，直到我们到达页面的底部和更多的加载

JSON

来源：https://stackoverflow.com/questions/76694149/infinite-scrolling-in-reactjs-from-scratch

1条答案

按热度按时间

hmae6n7t1#

我设法用这种方法解决了它

export default function App() {
  const [limiteData, setLimiteData] = useState([]);
  const [page, setPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  const fetchData = useCallback(() => {
     setIsLoading(true);

     // Simula un ritardo di caricamento per mostrare l'indicatore di caricamento
     setTimeout(() => {
       const newData = data.slice((page - 1) * 5, page * 5); // Carica 10 elementi per pagina
       setLimiteData((prevData) => [...prevData, ...newData]);
       setPage((prevPage) => prevPage + 1);
       setIsLoading(false);
     }, 1000);
  }, [page]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <div className="App">
      {limiteData.map((blok) => {
        return (
          <div key={blok._uid}>
            <h1>{blok.name}</h1>
          </div>
        );
      })}
      <Suspense fallback={<p>Loading...</p>}>
        {isLoading && <p>Loading...</p>}
       </Suspense>
    </div>
  );
}

字符串

赞(0）回复(0）举报 2023-08-08

我来回答

json ReactJS中的无限滚动

1条答案

相关问题

热门标签

最新问答