ページネーション）は（フェッチと反応

Question

に私は単に

getData() { 
    fetch('API_URL').then(res => res.json()).then(data => { 
     this.setState({ jobs: data.jobs }); 
    }).catch(console.log); 
} 

componentDidMount() { 
    this.getData(); 
} 

とAPIからオブジェクトを取得しています。しかし、私はより多くのオブジェクトをロードするためのボタンをクリックできるようにしたいです。

私はAPIを作成して、印刷するようにしてください。変数を "pageNumber"にして、 "load more"ボタンをクリックすると、次のページからフェッチして新しいオブジェクトを追加する必要があります。

これは正しいアプローチですか？または、コンポーネントをマウントするときに何千ものオブジェクトをロードし、Reactを使用して表示されるオブジェクト数を制限することはできますか？データを取得するには非常に非効率的な方法だと思いますが、Reactがこれをどれくらいうまく処理しているかはわかりません。

たとえば、私のAPIでは、X個のオブジェクトをプリントするだけで、フェッチ要求では、ロードされるオブジェクトの数を決めることはできますか？だから私は2回以上 "ロード"を押すと、APIのエンドポイントは、最初の20が既にフェッチされているにもかかわらず、わずか10ではなく30オブジェクトを返します？

私はReactでページネーションを検索しようとしましたが、多くのページネーションライブラリしか取得できませんでした。私はちょうど基本的な最初のフェッチと読み込みをクリックした後のフェッチを理解したいと思います。

編集

しかし、私は

{ 
    page: 1, 
    objectsPerPage: 10, 
    numPages: 30, 
    objects: [ 
    ... 
    ] 
} 

のようなものを返し、私は最初に1ページ上のオブジェクトを取得しています、と私は「ロードより」をクリックするたびに、私は増加APIエンドポイントを持っている場合ページ番号と次のページにオブジェクトを追加します（this.setState({ jobs: this.state.jobs.concat(data.jobs) });の場合、data.jobsは次のページのオブジェクトのリストです）、新しいオブジェクトがデータベースに作成されるのではないかと思います。すべてのまたは一部の重複が表示されているわけではありません。

Answer 1

はい、APIにpageNumberを設定するのが適切な方法です。これにより、持っていないレジスタだけが検索されます。他のサイズに

あなたのデータはあなたが偽のページネーションは、メモリ内のすべてのオブジェクトを有する唯一の興味のあるものを示すことができます大きすぎるではない場合。

私が増加することはお勧めしません。あなたがすでに取り込んだオブジェクトの利点を得ていないためにあなたが探しているオブジェクトの数は、あなたが数を増やすたびに、要求はますます多くなります。