TypeError: _this.props.onChangePage is not a function

material-tableのページネーションをクリックすると以下のエラーが出るようになりました。

Unhandled Runtime Error
TypeError: _this.props.onChangePage is not a function

このエラーが発生する環境は以下の通りです。

  • material-ui v4.12.2 v5以降
  • material-table v1.69.3

これらの組み合わせの環境では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

下記に参考書をまとめておきます。

created by Rinker
¥1,663 (2022/09/27 03:00:47時点 Amazon調べ-詳細)

りーほー
りーほー

JavaScriptを基礎からしっかり学びたい方におすすめ!

りーほー
りーほー

JavaScriptを基礎から応用までガッツリ学びたい方におすすめ!

りーほー
りーほー

Reactの概念や仕組みを把握し、開発で使えるReactを学びたい方にオススメ!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次