Reactで無限スクロールを実装

npm install react-infinite-scroller react-loading

import React, { useState, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroller';
import ReactLoading from 'react-loading';
import { getPageData } from './api'; // APIからデータを取得する関数

export const DataList = () => {
  const [items, setItems] = useState([]); // データリスト
  const [hasMore, setHasMore] = useState(true); // 追加データの有無
  const [page, setPage] = useState(1); // 現在のページ数

  const fetchData = async () => {
    try {
      const { data } = await getPageData(page);
      setItems((prevItems) => [...prevItems, ...data.items]);
      setHasMore(data.hasMore);
      setPage((prevPage) => prevPage + 1);
    } catch (error) {
      setHasMore(false);
    }
  };

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

  return (
    <InfiniteScroll
      loadMore={loadMore}
      hasMore={hasMore}
      loader={
        <div style={{ margin: '0 auto' }} key={0}>
          <ReactLoading type="spokes" color="#ccc" height={30} width={30} />
        </div>
      }
    >
      {items.map((item: any, index: number) => (
        <div key={index}>{item.title}</div>
      ))}
    </InfiniteScroll>
  );
};