无法添加属性 X，对象在 ngrx 9 更新后不可扩展

Question

我遇到了类似

的问题

Cannot add property X, object is not extensible

在使用 Ngrx 更新将我的 angular 项目更新为 angular 9 之后。当我将 Ngrxversion 回滚到 8 时，它工作正常。但我还需要使用 angular 9 更新将其更新为 v9。当我将其作为 datasource.data 添加到 material table 中并具有附加属性时，就会发生这种情况。我认为额外的属性更改是一个原因。但是我使用 slice 从我们得到的东西创建了新数组并像下面这样尝试。

 myDataArray.slice(0)

它也不起作用。

我在这里参考了 Ngrx 版本 8 到 9 的更改列表和迁移指南 https://ngrx.io/guide/migration/v9

我发现 angular9 有一个与不变性相关的特殊变化。他们在那里定义了与动作、状态和可串行化相关的不变性逻辑。我在此处尝试了他们建议的解决 Ngrx V9 更新问题的方法 https://ngrx.io/guide/store/configuration/runtime-checks

但这些对我不起作用。如果有人能解决这个问题，那真的很有帮助。提前致谢..

错误堆栈跟踪..（我也使用了 matDataFlatner，这就是对象突变发生的地方）

app-error-handler.ts:30 TypeError: Cannot add property level, object is not extensible at MatTreeFlattener.defaultFlattenerTransform [as transformFunction] (tree-table-flattener-builder.ts:57) at MatTreeFlattener._flattenNode (flat-data-source.ts:58) at flat-data-source.ts:81 at Array.forEach () at MatTreeFlattener._flattenChildren (flat-data-source.ts:78) at MatTreeFlattener._flattenNode (flat-data-source.ts:65) at flat-data-source.ts:92 at Array.forEach () at MatTreeFlattener.flattenNodes (flat-data-source.ts:92) at MatTreeFlatDataSource.set (flat-data-source.ts:138)

Answer 1

您应该深度克隆 myDataArray，因为它是通过选择器从商店中出来的。保持 store 中数据的不变性是 redux 模式的重要组成部分，如果你修改 myDataArray ，你将直接在 store 中更改数据（取决于你的选择器，它可能是相同的数据=>对商店中数组的引用）。

您可以 myDataArray = JSON.parse(JSON.stringify(myDataArray)) 在尝试对其进行任何更改之前。

有更有效的深度克隆对象的方法，例如使用 fast-copy:

import copy from 'fast-copy';

...

myDataArray = copy(myDataArray);

Answer 2

您可以使用 lodash 库中的 cloneDeep 函数来深度克隆对象并避免错误：

import {cloneDeep} from 'lodash';

const clonedData = cloneDeep(myDataArray);

然后，您可以添加属性或所有您想要的克隆数据对象。

此致！

Answer 3

我在这里参考了 Ngrx 版本 8 到 9 的更改列表和迁移指南

https://ngrx.io/guide/migration/v9

我发现 angular9 有一个与不变性相关的特殊变化。他们在那里定义了与动作、状态和可串行化相关的不变性逻辑。我在这里尝试了他们建议的解决 Ngrx V9 更新问题的方法

https://ngrx.io/guide/store/configuration/runtime-checks

您可以进行以下更改，


@NgModule({
  imports: [
  StoreModule.forRoot(reducers, {
    runtimeChecks: {
      strictStateImmutability: false,
      strictActionImmutability: false,
    },
  }),
 ],
})
export class AppModule {}

@ngrx/store ships with five (5) built-in runtime checks. Try disabled all checks

无法添加 属性 X，对象在 ngrx 9 更新后不可扩展

Cannot add property X, object is not extensible after ngrx 9 update

redux

ngrx

angular

angular9

无法添加属性 X，对象在 ngrx 9 更新后不可扩展