🐬

TablePaginationのエラー　TablePagination is out of range

2023/05/24に公開

Warning: Failed prop type: MUI: The page prop of a TablePagination is out of range (0 to 0, but page is X).

Paginationのエラー

ページがレンダリングされるとき（データを取得する前）には、count propの値は0なのでこのエラーが起きる。

<TablePaginationCustom
      count={totalCount}
      page={page}
      rowsPerPage={rowsPerPage}
      onPageChange={handleOnPageChange}
      onRowsPerPageChange={(e) =>
      handleOnRowsPerPageChange(e as React.ChangeEvent<HTMLInputElement>)}
/>

変更点

page={!totalCount || totalCount <= 0 ? 0 : page}

!totalCount は totalCount の真偽を反転させる演算です。つまり、totalCount が存在しない場合または 0 と等しい場合に真となります。
totalCount <= 0 は totalCount が 0 以下の場合に真となります。
条件演算子全体の意味は、totalCount が存在しないか、または 0 以下の場合は page を 0 に設定し、それ以外の場合は page の値を維持するということです。
つまり、もし totalCount が存在しないか、または 0 以下の場合、page の値は 0 になります。それ以外の場合は page の値は変更されません。

これで解決できました。ご参考までに

Paginationのエラー

変更点

Discussion