2/28.log

log

今日は午前中は来週からの準備をしていて午後からプログラミングをしていました！

明日から３月ですね。来週からはこれまで以上に忙しくなるのでもしかしたら来週からは今まで以上にプログラミングの時間がないといったことがあるかもしれないです。準備も結構してきたので4月の初めまでに内定が欲しいけどどうですかね？

プログラミングの進捗

この目次を書いたのが結構久しぶりである気がします。プログラミング自体はテストなり研究なりで行っていたのですが趣味のアプリケーションを触れたのは久しぶりである気がします。

今日はページネーションの実装をしていました。前回(前回っていつ？)まででページネーションの情報を取得できるようなapiは作ってあるのでそれがフロントエンド側で実際に動くようにしました。

コンポーネントはmaterial uiのものを使っています。コンポーネントのデザインは変わらないのでそれ専用の変数は要らなかったので必要な情報としてはページネーション全体のページ数、ページネーションで閲覧ページを変更したときのロジックだけで、stateとしてはページ数合計を管理するもの、現在見ているページ番号を管理するものだけでした。少ないですね。これだけでページネーションが実装できてしまいます。

注意点としてページネーションの閲覧ページが変わってもリロードはしないので変わったときにデータを取得するロジックを別で書く必要が出てきます。今回はエフェクトを使っていたので第二引数の依存性にページを管理する変数を入れてやりました。これによってページが読み込まれたときはもちろん、ページが変わった時にもデータを取得してくることができます。

とりあえず最低限必要になりそうなものを一部コードとして載せておきます。一部変数を変えたりコメントを入れたりしています。

 import Pagination from '@material-ui/lab/Pagination';

//現在のページ管理
 const [page, setPage] = useState(1);
 //最後のページ管理
 const [lastPage, setLastPage] = useState(1);

//エフェクトで読み込み初回はもちろんページが変わった時にも取得
  useEffect(() => {
   //apiを叩く自作関数
   fetchSurveys();
 }, [page]);
 
 
//return内
<Pagination
    count={lastPage}
    onChange={(e, page) => setPageNum(page)}
/>