TypeError: _this.props.onChangePage is not a function

React
スポンサーリンク
language

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を使うようにしてください。

参考

deprecated @material-ui/core prop-type updates by matthoffner · Pull Request #2937 · mbrn/material-table
Related Issue #2935 Description Prop type updates from @material-ui/core deprecated prop types: Updates onChangePage to onPageChange Updates onChangeRowsPerPa...

この記事でわからないコードなどがあれば、書籍で勉強するのがおすすめです。
プログラミングの技術の移り変わりは早いので最新版の書籍を購入することをお勧めします。
中古本を買って勉強したけど、今は使われない技術だったということはよくあります。

javascript・Reactでおすすめの書籍をご紹介します。

りーほー
りーほー

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

りーほー
りーほー

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

りーほー
りーほー

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

タイトルとURLをコピーしました