Reactで無限スクロールを実装する方法

React Javascript

Reactで無限スクロールを実装する方法

Reactで無限スクロールを実装する方法はいくつかありますが、一般的なアプローチは、スクロールイベントを監視して新しいデータをロードする方法です。
以下に、Reactで無限スクロールを実装するシンプルな例を示します。
この例では、スクロールがページの下部に達したときに新しいデータをロードします。

必要なライブラリをインストールします。
axiosを使用してデータを取得し、react-infinite-scroll-componentを使用して無限スクロール機能を簡単に実装します。

npm install axios react-infinite-scroll-component
# または
yarn add axios react-infinite-scroll-component

次に、Reactコンポーネントを作成します。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import InfiniteScroll from 'react-infinite-scroll-component';

const InfiniteScrollExample = () => {
  const [items, setItems] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);

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

  const fetchData = async () => {
    const response = await axios.get(https://api.example.com/data?page=${page}&limit=20);
    const newItems = response.data;

    setItems(prevItems => [...prevItems, ...newItems]);
    setPage(prevPage => prevPage + 1);
    if (newItems.length === 0) {
      setHasMore(false);
    }
  };

  return (
    <InfiniteScroll
      dataLength={items.length}
      next={fetchData}
      hasMore={hasMore}
      loader={<h4>Loading...</h4>}
      endMessage={<p>No more items to load</p>}
    >
      <div>
        {items.map((item, index) => (
          <div key={index}>
            <h4>{item.title}</h4>
            <p>{item.description}</p>
          </div>
        ))}
      </div>
    </InfiniteScroll>
  );
};

export default InfiniteScrollExample;

説明

1. Stateの設定

  • items：現在表示されているデータを格納します。
  • hasMore：更にデータをロードできるかどうかを示します。
  • page：現在のページ番号を追跡します。

2. useEffectフック

  • コンポーネントのマウント時に初期データをフェッチします。

3. fetchData関数

  • 現在のページ番号を基に新しいデータをAPIから取得し、既存のデータに追加します。
  • データが取得できない場合（newItems.lengthが0の場合）、hasMoreをfalseに設定します。

4. InfiniteScrollコンポーネント

  • dataLength：現在表示されているデータの長さ。
  • next：次のデータをフェッチするための関数。
  • hasMore：更にデータをロードする必要があるかどうか。
  • loader：データをロードしている間に表示されるコンポーネント。
  • endMessage：全てのデータがロードされた後に表示されるメッセージ。

このコードを使用すると、ユーザーがページの下部にスクロールしたときに新しいデータが自動的にロードされます。