material-tableのページネーションをクリックすると以下のエラーが出るようになりました。
Unhandled Runtime Error
TypeError: _this.props.onChangePage is not a functionこのエラーが発生する環境は以下の通りです。
これらの組み合わせの環境ではmaterial-tableのページネーションをクリックするとエラーが発生します。
この記事ではmaterial-tableのページネーションをクリックする発生するこのエラーの原因と解決方法をご紹介します。
解決方法は自作のTablePaginationを使う
material-table v1.69.3のTablePaginationが使えないので、自作で修正したTablePaginationはPatchedPaginationとしてコンポーネントを作りMaterialTableで使う必要があります。
自作で修正したPatchedPaginationのサンプルコードは以下の通りです。
import MaterialTable, { MaterialTableProps } from "material-table";
import { TablePagination, TablePaginationProps } from "@material-ui/core";
export function PatchedPagination(props: TablePaginationProps) {
const {
ActionsComponent,
onChangePage,
onChangeRowsPerPage,
...tablePaginationProps
} = props;
return (
<TablePagination
{...tablePaginationProps}
// @ts-expect-error onChangePage was renamed to onPageChange
onPageChange={onChangePage}
onRowsPerPageChange={onChangeRowsPerPage}
ActionsComponent={(subprops) => {
const { onPageChange, ...actionsComponentProps } = subprops;
return (
// @ts-expect-error ActionsComponent is provided by material-table
<ActionsComponent
{...actionsComponentProps}
onChangePage={onPageChange}
/>
);
}}
/>
);
}
PatchedPaginationコンポーネントは以下のようにしてMaterialTableに組み込むことができます。
<MaterialTable
components={{
Pagination: PatchedPagination,
}}
/>原因はmaterial-ui v4.12.2以降でTablePaginationのonChangePageが削除されたから
material-ui v4.12.2のTablePaginationでonChangePageが非推奨となったことが案内されています。
onChangePageの代わりにonPageChangeを使わなければいけません。
Deprecated. Use the onPageChange prop instead.
Callback fired when the page is changed.非推奨。代わりにOnPageChange Propを使用してください。
https://material-ui.com/api/table-pagination/#props
ページが変更されたときに発生するコールバックです。
material-UI v5ではTablePaginationのonChangePageが完全に削除されています。
他にもonChangeRowsPerPageがmaterial-UI v4.12.2から非推奨となっています。
代わりにonRowsPerPageChangeを使うようにしてください。
参考
https://github.com/mbrn/material-table/pull/2937
下記に参考書をまとめておきます。
JavaScriptを基礎からしっかり学びたい方におすすめ！
JavaScriptを基礎から応用までガッツリ学びたい方におすすめ！
Reactの概念や仕組みを把握し、開発で使えるReactを学びたい方にオススメ！
コメント