材料表類型錯誤：無法添加屬性表數據，對象不可擴展

Question

我正在使用帶有React meterial-table 。 我正在嘗試從來自這樣的 api 的數組中分配數據

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

其中columns和rows是 api 數據。 但我收到了這個錯誤：

TypeError: Cannot add property tableData, object is not extensible

值得注意的是，當我使用模擬硬編碼數據時，一切正常。 經過一番搜索，我找不到任何解決方案，有什么幫助嗎？

Answer 1

您很可能使用immer或在后台使用immer的庫（例如@reduxjs/toolkit ）。 immer使用Object.freeze使其生成的對象不可變。

material-table修改了自己的 props（這是一個非常丑陋的反模式）。 當圖書館違反規則時，它們不會與試圖強制執行規則的圖書館合作。

無法解凍已凍結的對象，但您有幾個選擇：

1. 找到一種在 immer 實例中禁用凍結的方法（查看 API 文檔，了解您認為可能凍結了您的狀態的任何內容）。

2. 覆蓋Object.freeze使其什么都不做（非常hacky，應該避免 - 但它可能是你最好的選擇）：

window.Object.freeze = function(obj) { return obj }

3. 在將其傳遞給MaterialTable之前克隆/深度復制您的狀態。 這也遠非理想，尤其是在您擁有大量數據的情況下。

Answer 2

這與material-table或React無關。 這很可能與您的 api 響應有關，出於某種原因在其上應用了Object.preventExtensions() ，也許這是Axios行為。 因此，當material-table嘗試為每個對象添加一個id字段時，它會遇到此錯誤。 雖然不是最佳的，但嘗試將您的 api 數據復制到一個新的對象數組中，以便material-table可以修改它們，例如：

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

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

請注意，我沒有使用rows.map(o => o)因為這將復制具有相同對象引用的數組

編輯：值得一提的是，使用擴展運算符或Object.assign只會給出淺拷貝，即不會復制嵌套對象。 一種解決方法是使用JSON.parse(JSON.stringify(object)) 。 請注意，這會導致一些數據丟失，其他替代方法在這個答案上： What is the most effective way to deep clone an object in JavaScript?

Answer 3

從“immer”導入 { setAutoFreeze }； 設置自動凍結（假）；

為我工作。 材質表應該考慮一個和immer配合得很好的api

Answer 4

在我使用reduxjs/toolkit的Material Data Table中傳遞數組數據時出現此錯誤

由於對象是不可修改的，由於Object.freeze()的內部實現

reduxjs/工具包

 const {cycleList}=JSON.parse(JSON.stringify(useSelector(state=>state.cycleSlice))); 

我使用上述方法來創建對象的新副本。

Answer 5

就我而言，使用“structuredClone”功能解決了同樣的問題。

var a = useSelector((state) =>state.cusLocChartTable.CusLocationCT);
const cloneData = structuredClone(a.billcity_table);

<ThemeProvider theme={defaultMaterialTheme}>
  <MaterialTable
       columns={[
               { title: 'City', field: 'city' },
               { title: 'Customers', field: 'customers' }
               ]}
               data={cloneData}
               title="Customers"
  />
</ThemeProvider>