components/ListPaginationPanel: フィルタを使うと壊れる

[iilj]

kenkoooo/AtCoderProblems#535 と同じ問題

[iilj]

デフォルトの PaginationPanel でも同様の問題が発生したので，CustomPaginationPanel の問題ではないかもしれない

[iilj]

再現方法

1. ListPage で search フィルタに "th" と入力
2. 2ページ目へ移動する
3. Level From のドロップダウンから，★の数が 2.5〜5.0 のいずれかのアイテムを選択する
4. クラッシュする

なお，Level From のドロップダウンから，★の数が 2.0 以下あるいは 5.5 以上のアイテムを選択した場合はクラッシュしない．
再現のための条件は，CustomPaginationPanel の場合もデフォルトの PaginationPanel の場合も同じ．

[iilj]

ListPaginationPanel に渡される currPage が古い値のままになってしまっているのが確認できた．
したがって， BootstrapTable 側で currPage がリセットされるべきタイミングでリセットされないのが原因である模様．

また，ドロップダウンメニューのフィルタ条件を先に変更してから search フィルタを変更したときにはこの現象は再現しない．
したがって， search が BootstrapTable 組み込みの機能であるのに対して，各種フィルタが data を弄ることによって実現していることが不具合に影響しているのかもしれない．

[iilj]

PaginationPanel に渡される値

<ListPaginationPanel> に渡される値がそもそも正しいのか確かめる方法．

export const ListPaginationPanel = (props) => {
  console.log(props);
  (略)
};

currPage, pageStartIndex, totalPages の数字を見る．
前述の手順に従うと，「Level From のドロップダウンから，★の数が 2.5〜5.0 のいずれかのアイテムを選択する」のあとに (currPage, pageStartIndex, totalPages) = (2,1,1) という数字が渡されていることがわかる．
ここでは，本来は BootstrapTable 側で currPage が 1 にリセットされるべきだが，されていない．

★5.5 以上のアイテムをドロップダウンメニューから選択したときは，currPage が正常に 1 にリセットされる．（何故だろう？）

クラッシュするタイミング

<BootstrapTable> の option を弄って何とかできないかと色々と試した．

options={{
          (略),
          paginationPanel: (paginationPanelProps) => (
            <ListPaginationPanel {...paginationPanelProps} />
          ),
          onPageChange: (page, sizePerPage) => {
            console.log("onPageChange", page, sizePerPage);
          },
          onFilterChange: (filterObject) => {
            console.log("onFilterChange", filterObject);
          },
          afterTableComplete: () => {
            console.log("afterTableComplete");
          },
          afterSearch: (search, result) => {
            console.log("afterSearch", search, result);
          },
          onSearchChange: (searchText, colInfos, multiColumnSearch) => {
            console.log("onSearchChange", searchText, colInfos, multiColumnSearch);
          },
}}

というようなことをすると，Level From のドロップダウンを変更したあと，afterSearch のみが発火してクラッシュする．

page オプション

page オプションを state 管理することで，changePage() に相当する操作をイベント内から無理やり行う方法が存在する．
AllenFang/react-bootstrap-table#1593

そこで，こんなことを試してみた．

export const ListTable = (props) => {
  const [currentPage, setCurrentPage] = useState(1);
  (略)
          afterSearch: (search, result) => {
            console.log("afterSearch", search, result);
            setCurrentPage(1);
          },
          page: currentPage
 (略)
};

しかし，これでは setCurrentPage するのが遅すぎる．