無限スクロールの適用

カクテルレシピ共有プロジェクトを作成すると同時に.
カクテルレシピリストを表示する方法は無限スクロールに適用される
リストを表示する方法には、ページングと無限スクロールが含まれます.
無限スクロールはユーザ体験に積極的であると考え,無限スクロールを採用した.

無限スクロールの適用

正しい方法かどうかはわかりませんが、グーグルで取得した情報で実現できます.

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  });

コンポーネントをuseEffect hookでレンダリングするときのスクロールの検出

  const handleScroll = async () => {
    if (
      window.innerHeight + window.scrollY + 100 >= document.body.offsetHeight &&
      !isEnd
    ) {
      setAddFetching(true);
      const data = await requestList(count + 12, query);
      if (data.length !== 0) {
        dispatch(addArticleList(data));
        setCount(count + 12);
      } else {
        setIsEnd(true);
      }
      setAddFetching(false);
    }
  };

スクロール下部(window.innerHeight+window.scrolly)がページ下部に触れて追加のキャプチャを実現
countは、データを受信する最初のインデックスを記録し、取得時にサーバに送信します.
これによりサーバはcountから12の投稿を送信します
データが受信されると、次の受信する投稿にcount 12が追加され、isEndがtrueの場合、countは追加されません.
このとき、isEndは、サーバを介して受信したデータ長が0の場合、受信するデータがなくなるようにisEnd stateを変更します
setAddFetchingは、fetchの始点と終点で変更するためにロードインジケータを表示するように記述されています.

疑問点

の投稿を参照した後、「≪戻る|Back|emdw≫」または「≪リスト|List|emdw≫」ボタンをクリックして戻ると、最初からスクロールを再開する必要があるという欠点があります.これは無限スクロールの欠点と見なすべきか、それとも追加の符号化で阻止できる問題と見なすべきか....

普通の脚注はなかなか見られないと言われていますが、これは仕方ないようです…?現在の項目の投稿数は少なく、投稿リストを最後にすると、フッターが表示され、表示可能な投稿がないことを示すメッセージが表示されます.

ビットの問題を解決するために、より多くのビューボタンを作成することができます!