redux 无法添加属性X,对象在ngrx9更新后不可扩展

628mspwn  于 2023-03-23  发布在  其他
关注(0)|答案(4)|浏览(152)

我有个问题
无法添加属性X,对象不可扩展
在用Ngrx更新将我的angular项目更新到angular 9之后。当我将Ngrxversion回滚到8时,它工作正常。但是我需要用angular 9更新将其更新到v9。当我将此作为www.example.com添加到材料表中时,会发生这种datasource.data情况。我认为额外的属性更改是一个原因。但是我从我们得到的创建了一个新的数组,并使用slice进行了如下尝试。

myDataArray.slice(0)

它也不工作。
我在这里参考Ngrx版本8到9的更改列表和迁移指南https://ngrx.io/guide/migration/v9
我发现angular 9有一个与不变性相关的特殊变化。他们在那里定义了Action,state和serializability相关的不变性逻辑。我尝试了他们建议的方法来解决Ngrx V9 update here https://ngrx.io/guide/store/configuration/runtime-checks的这些问题
但这些都不是为我工作.这是真的很有帮助,如果有人有一个解决这个问题.提前感谢..
error stack trace..(我也使用了matDataFlatner,这是对象发生变化的地方)
app-error-handler.ts:30 TypeError:无法添加属性级别,MatTreeFlattener上的对象不可扩展。MatTreeFlattener上的defaultFlattenerTransform [as transformFunction](tree-table-flattener-builder.ts:57)。flatten-data-source上的_flattenNode(flat-data-source.ts:58)。MatTreeFlattener上的Array.forEach()上的ts:81。MatTreeFlattener上的_flattenChildren(flat-data-source.ts:78)。flatten-data-source上的_flattenNode(flat-data-source.ts:65)。MatTreeFlattener上的Array.forEach()上的ts:92。MatTreeFlattener上的flattenNode(flat-data-source.ts:92)。MatTreeFlatDataSource上的flattenNode(flat-data-source.ts:138)

nbysray5

nbysray51#

你应该深度克隆myDataArray,因为它是通过选择器从存储中出来的。保持存储中数据的不变性是redux模式的重要组成部分,如果你修改myDataArray,你会直接在存储中更改数据(取决于你的选择器,它可能是相同的data =〉对存储中数组的引用)。
你可以先执行myDataArray = JSON.parse(JSON.stringify(myDataArray)),然后再尝试对它进行任何更改。
有更有效的方法来深度克隆对象,例如使用fast-copy

import copy from 'fast-copy';

...

myDataArray = copy(myDataArray);
6tdlim6h

6tdlim6h2#

您可以使用lodash库中的cloneDeep函数来深度克隆对象,并避免错误:
import {cloneDeep} from 'lodash';
const clonedData = cloneDeep(myDataArray);
然后,您可以添加属性或所有您想要的clonedData对象。
问候!

pepwfjgg

pepwfjgg3#

我在这里参考Ngrx版本8到9的更改列表和迁移指南
https://ngrx.io/guide/migration/v9
我发现angular 9有一个与不变性相关的特殊变化。他们在那里定义了Action,state和serializability相关的不变性逻辑。我尝试了他们建议的方法来解决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
xzv2uavs

xzv2uavs4#

为了解决这个问题,我们需要克隆选择器的数据(createSelector
示例:在升级Ngrx或Angular之前,您的代码看起来像这样:

export const getFrameworkCitationsSuccess = createSelector(getFrameworkState, (state: FrameworkState) => {
  return { frameworkCitations: state.frameworkCitations, filters: state.filters };
});

升级Ngrx或Angular后,请执行以下更改:

export const getFrameworkCitationsSuccess = createSelector(getFrameworkState, (state: FrameworkState) => {
  return { frameworkCitations: [...state.frameworkCitations], filters: {...state.filters} };
});

SS:

相关问题