无法添加属性 X，ngrx 9 更新后对象不可扩展 [英] Cannot add property X, object is not extensible after ngrx 9 update

问题描述

我遇到了类似的问题

无法添加属性X，对象不可扩展

Cannot add property X, object is not extensible

在使用 Ngrx 更新将我的 angular 项目更新为 angular 9 之后.当我将 Ngrxversion 回滚到 8 时，它工作正常.但是我还需要使用 angular 9 更新将其更新到 v9.当我将其作为 datasource.data 添加到具有附加属性的材料表中时，就会发生这种情况.我认为额外的属性改变是一个原因.但是我使用切片从我们得到和尝试的内容中创建了新数组.

after updating my angular project to angular 9 with Ngrx update as well. When I rollback Ngrxversion to 8 it's working fine. But I need to update that as well to v9 with angular 9 updates. This has happened when I add this as datasource.data in the material table with additional attribute. I think that additional attribute alteration is a reason for that. But I create new array from what we got and tried out like below by using slice.

 myDataArray.slice(0)

它也不起作用.

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

I refer change list of Ngrx version 8 to 9 and migration guideline here https://ngrx.io/guide/migration/v9

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

As I found there is a special change related to immutability with angular 9. They have defined Action, state and serializability related immutability logic there. And I tried out the method that they have suggested to resolve those issues with Ngrx V9 update here https://ngrx.io/guide/store/configuration/runtime-checks

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

But those are not worked for me. It's really helpful if anyone has a solution to this issue. Thanks in advance..

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

error stack trace.. (I used matDataFlatner as well that's where the object mutation happens)

app-error-handler.ts:30 TypeError:无法添加属性级别、对象不可扩展在 MatTreeFlattener.defaultFlattenerTransform [as transformFunction] (tree-table-flattener-builder.ts:57)在 MatTreeFlattener._flattenNode (flat-data-source.ts:58)在 flat-data-source.ts:81在 Array.forEach()在 MatTreeFlattener._flattenChildren (flat-data-source.ts:78)在 MatTreeFlattener._flattenNode (flat-data-source.ts:65)在 flat-data-source.ts:92在 Array.forEach()在 MatTreeFlattener.flattenNodes (flat-data-source.ts:92)在 MatTreeFlatDataSource.set (flat-data-source.ts:138)

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)

推荐答案

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

You should deep-clone myDataArray because it's coming out from the store through a selector. Keeping the immutability of the data in the store is an important part of redux pattern and you'd be changing the data directly in the store if you modify myDataArray (depending on your selector, it could be the same data => a reference to the array in the store).

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

You can do myDataArray = JSON.parse(JSON.stringify(myDataArray)) before trying to make any change in it.

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

There are more efficient ways of deep-cloning an object, for example using fast-copy:

import copy from 'fast-copy';

...

myDataArray = copy(myDataArray);

这篇关于无法添加属性 X，ngrx 9 更新后对象不可扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！