我有一个ngrx商店,里面有一个对象数组,我想要的是,用数组索引更新(修改)数组里面的对象。我想要的是,使用数组索引更新(修改)数组中的对象,我的ngrx数据会是这样的。
policies: {
beneficiaries: {
beneficiaries: [{
name: 'pqr'
age: 56
},
{
name: 'xyz'
age: 76
}
]
}
}
我必须根据数组索引来更新受益人的名字,所以我实现了下面的reducer函数。
on(policiesActions.updateBeneficiaryPercentage, (state, action) => {
return {
...state,
beneficiaries: {
...state.beneficiaries,
beneficiaries: {
...state.beneficiaries.beneficiaries,
[action.index]: {
...state.beneficiaries.beneficiaries[action.index],
name: action.value
}
}
}
};
})
上述代码的问题是,运行这段代码后,我的店铺结构变成了
policies: {
beneficiaries: {
beneficiaries: {
0: {
name: 'pqr'
age: 1000
},
1: {
name: 'xyz'
age: 76
}
}
}
}
请帮我修正一下代码,让我可以在不改变存储结构的情况下更新值。
当更新数组中的对象时,我将重新创建一个数组,其中包含所有被排除的对象,并追加最后一个需要更新的对象。
const policies = {
beneficiaries: {
beneficiaries: [{
name: 'pqr',
age: 56
},
{
name: 'xyz',
age: 76
}
]
}
}
const updateObject = (state, action) => {
if(!state.beneficiaries.beneficiaries[action.index]) {
return state;
}
return {
...state,
beneficiaries: {
...state.beneficiaries,
beneficiaries: [
...state.beneficiaries.beneficiaries.slice(0, action.index),
{
...state.beneficiaries.beneficiaries[action.index],
name: action.value
},
...state.beneficiaries.beneficiaries.slice(action.index + 1)
]
}
};
}
console.log(updateObject(policies, {index: 1, value: 'test'}))
--编辑
添加了该代码段,并修改了逻辑,因此它不会改变列表顺序。
使用 Array.map
方法。
arr.map((value, index) => index === action.index ? {...value, name: action.value} : value)
或者直接用 ngrx等它让你在保持不变的情况下,以一种可变的方式改变你的状态。
mutableOn(onAction, (state, action) => {
state.arr[action.index].name = action.name
return state
})