☰

Material-table TypeError: プロパティ tableData を追加できません。オブジェクトは拡張可能ではありません。質問する

tag-icon • tag-icon javascript reactjs axios material-ui material-table
Material-table TypeError: プロパティ tableData を追加できません。オブジェクトは拡張可能ではありません。質問する

私はmeterial-tableを使用していますReact。このようなAPIからの配列からデータを割り当てようとしています

<MaterialTable
  columns={columns}
  data={rows}
  ...
/>

とcolumnsはrowsAPI データです。しかし、次のエラーが発生します:

TypeError: Cannot add property tableData, object is not extensible

特に、ハードコードされたモックデータを使用すると、すべてが完璧に動作します。検索した後、解決策が見つかりませんでした。何か助けはありますか?

ベストアンサー1

material-tableこれはまたは とは関係ありませんReact。おそらく、Object.preventExtensions()何らかの理由で API 応答が適用されたことに関連しており、これは動作かもしれませんAxios。したがって、各オブジェクトにフィールドmaterial-tableを追加しようとするとid、このエラーが発生します。最適ではありませんが、API データを新しいオブジェクト配列にコピーして、material-table変更できるようにします。例:

const editable = rows.map(o => ({ ...o }));

<MaterialTable
  columns={columns}
  data={editable}
  ...
/>

rows.map(o => o)同じオブジェクト参照を持つ配列をコピーするため、使用しなかったことに注意してください。

編集: 使用することは言及する価値があるスプレッド演算子またはオブジェクト.割り当ては浅いコピーのみを行います。つまり、ネストされたオブジェクトはコピーしません。これを回避する方法の 1 つは、 を使用することですJSON.parse(JSON.stringify(object))。ただし、これによりデータが失われる可能性があることに注意してください。他の代替案は次の回答にあります。JavaScript でオブジェクトをディープクローンする最も効率的な方法は何ですか?

おすすめ記事