活用して無限スクロールの実装ができないか、試してみることにしました。埋め込みからご覧いただけます。使用してデータを取得します。以下は、JsonPlaceholderから投稿データを取得するための関数の例です。[];};この関数は、指定されたオフセットから10件の投稿データを取得します。PAGE_SIZEを使用して、一度に取得するデータの件数を制御しています。このようにして、無限スクロールの際に次のデータセットを取得するための基盤を作成します。してリリースされました。設定が不要となりました。Actionsを使用して、更に投稿データをロードするための関数の例です。指定されたオフセットから次のデータセットを取得し、それをPostCardコンポーネントとしてマッピングします。次のオフセットも計算して返しています。これにより、無限スクロールの際に次のデータセットを取得するための情報も提供されます。次に、メインページの実装を行います。このページでは、初めに投稿データを取得し、それを表示するとともに、さらにデータをロードするための機能を提供します。コンポーネントが使用されています。このコンポーネントの詳細については、次のセクションで説明します。投稿のリストと各投稿を表示するためのコンポーネントを実装します。使用してコンポーネントを構築しています。コンポーネントについてこのコンポーネントは、指定されたオフセットから新しいデータを取得し、それを表示するための機能を提供します。データの取得中にはスピナーを表示して、ユーザーにデータのロード中であることを知らせます。クライアントコンポーネントとして実装します。指定されたオフセットから新しいデータを取得する関数の型を定義しています。この関数は、取得したデータのJSX要素の配列と次のオフセット(またはデータがない場合はnull)を返すPromiseを返す必要があります。スクロールの最下部に位置するボタン要素への参照を保持します。Observerを設定します。新しく取得したデータを表示するためのJSX要素の配列を保持する状態です。新しいデータが取得されるたびに、この配列に新しい要素が追加されます。現在データの取得中かどうかを示す状態です。データの取得中はtrue、取得が完了したらfalseになります。この状態を使用して、データ取得中にスピナーを表示するかどうかを制御します。次に取得するデータのオフセットを保持する参照です。データの取得が完了するたびに、このオフセットは更新されます。関数は、新しいデータを取得するための主要な関数です。指定されたオフセットからデータを取得し、それをloadMoreNodes状態に追加します。設定して、スピナーを表示します。フックを使用して、スクロールの監視を行います。関数を呼び出して新しいデータを取得します。</>);最後に、取得したデータとスピナーを表示します。データの取得中は、スピナーが表示され、データが取得されたらそのデータが表示されます。現在の実装では、全てのデータが取得された後も、画面の最下部に到達するたびにスピナーが表示されてしまいます。以下のコード追加で、全てのデータが取得された場合にはスピナーを表示しないように修正します。利用して、無限スクロールの機能を実装する方法について解説しました。tsubolog.appバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。