Next.jsでmaterial-tableを使う

React
スポンサーリンク
language

Next.jsとmaterial-tableはとても使い勝手がいいので僕はよく使います。
しかし、これらは相性が悪く、Next.jsでmaterial-tableは素直に動いてくれません。

Next.jsでmaterial-tableを使用するにはハマりポイントがあり、以下のエラーが出ます。

  • TypeError: Cannot add property tableData, object is not extensible
  • material table Invariant failed: Draggable[id: 1]: Unable to find drag handle

今回はNext.jsでmaterial-tableを使う際のハマりポイントとその解消方法をご紹介します。

スポンサーリンク

material tableのdataには新しい配列を渡す

Next.jsのmaterial-tableにjsonをそのまま入れてしまうと以下のエラーが出ます。

Unhandled Runtime Error
TypeError: Cannot add property tableData, object is not extensible

このエラーを解消するには新しい配列にしてmaterial-tableに渡す必要があります。
以下のコードように渡してあげるとmaterial-tableにデータを渡せます。

import React, { useEffect, useState } from "react";
import MaterialTable from "material-table";

function table() {

    return (
        <>
            <MaterialTable
              data={JSON.parse(JSON.stringify(rows))}
              // or
              // data={rows.map(row => ({ ...row }))}
              ...
            />
        </>
    );
}
export default table;

ウィンドウオブジェクトができてからmaterial tableで表示する

コンポーネントがロードされる前にDOMとウィンドウがロードされていないために発生します。
そのため以下のエラーが出ます。

material table Invariant failed: Draggable[id: 1]: Unable to find drag handle

このエラーが出ていても、テールブルは表示されます。
しかし、削除アイコンのonClick()などの挙動が発火しません。

このエラーを解消するにはウィンドウオブジェクトの準備ができてからテーブルを表示させる必要があります。

import React, { useEffect, useState } from "react";
import MaterialTable from "material-table";

function table() {
    const [winReady, setwinReady] = useState(false);
    useEffect(() => {
        setwinReady(true);
    }, []);

    return (
        <>
            {winReady ? <MaterialTable ... /> : null}
        </>
    );
}
export default table;

参考

Material-table TypeError: Cannot add property tableData, object is not extensible
I'm using meterial-table with React. I'm trying to assign data from an array coming from an api like this <MaterialTable columns={columns} data={rows} ...

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

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

りーほー
りーほー

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

りーほー
りーほー

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

りーほー
りーほー

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

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