从嵌套对象中删除数据而不发生突变
Remove data from nested objects without mutating
有没有优雅的方法可以从数组中删除对象,该数组是数组的一部分?我已经使用 React 和 Redux 一段时间了,但每次我必须在不改变状态的情况下删除或插入数据时都会卡住几个小时。
reducer 是一个数组,其中包含一个 ID 的对象和另一个包含对象的数组,如下所示:
[
{ id:123,
items:[
{ id: abc,
name: albert
},
...
]
},
...
]
我收到了两个 ID,需要删除 ID abc
的项目。
按 id 从数组中删除项目:
return state.filter(item => item.id !== action.id)
要按 id 从对象中删除键,请执行以下操作:
let copy = Object.assign({}, state) // assuming you use Object.assign() polyfill!
delete copy[action.id] // shallowly mutating a shallow copy is fine
return copy
(奖励)与对象传播运算符提案相同:
let { [action.id]: deletedItem, ...rest } = state
return rest
const remove = (state, bucketId, personId) => state.map(
bucket => bucket.id === bucketId
? { ...bucket, items: bucket.items.filter(person => person.id !== personId) }
: bucket,
);
用法:
const state = [
{
id: 123,
items: [
{
id: 'abc',
name: 'Kinna',
},
{
id: 'def',
name: 'Meggy',
},
],
},
{
id: 456,
items: [
{
id: 'ghi',
name: 'Ade',
},
{
id: 'jkl',
name: 'Tades',
},
],
},
];
console.log(remove(state, 123, 'abc'));
您可以使用下划线的拒绝。它完全符合您的要求。
如果你决定使用纯Javascript,我能想到的最优雅的方法是使用Array.prototype.reduce
来减少状态:
var state = [
{ id: 123,
items:[
{ id: 'abc',
name: 'albert'
},
...
]
},
...
]
function filterOut (state) {
return (bucketId, personId) => {
return state.reduce((state, bucket) => {
return state.concat(
(bucketId === bucket.id) ?
Object.assign({}, bucket, {items: bucket.items.filter((person) => person.id !== personId)}) :
bucket
);
}, []);
}
}
var newState = filterOut(state)(123, 'abc');
你也可以使用 lodash 的 omit 方法。
请注意,导入 lodash 会大大增加您的构建大小。通过仅导入特定方法来控制它: import omit from 'lodash/omit';
如果可能的话,我建议使用对象传播运算符,如Dan的答案中所述。
我以这种方式解决了我的问题
if(action.type === "REMOVE_FROM_PLAYLIST"){
let copy = Object.assign({}, state)
delete copy.playlist[action.index].songs[action.indexSongs];
return copy;
}
希望它对其他人有所帮助。
相关文章:
- 用程序搜索JQuery数据表中的文本
- 要求输入在数据列表中
- 正在将数据主题添加到所有项目
- 函数参数中的数据与指定变量之间的任何性能差异
- 在VanillaJS中模拟模型双向数据绑定
- CSS-如何定位内容数据标题
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 序列化数据属性中对象的最可靠方法
- 如何将JSON数据导入我的ejs模板
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 画布数据到图像
- 使用jquery将mysql数据获取到新的表行中
- 使用html中的外部javascript进行数据验证
- 从嵌套对象中删除数据而不发生突变
- 突变观察者字符数据使用情况,没有子列表
- 阿波罗:数据/突变道具没有传递给组件
- 错误"试图在不允许突变的数据库上进行突变操作."在indexedDB中检索数据时
- 基于d3树的图表的Angular指令中的数据突变