const List = Immutable.List;
const items = [
{ id: 1, subList: [] },
{ id: 2, subList: [] },
{ id: 3, subList: [] }
];
const newItem = { name: "sublist item" };
let collection = List(items);
collection = collection.updateIn([0, 'subList'], function (items) {
return items.concat(newItem)
});
https://jsbin.com/midimupire/edit?html,js,console
结果:
Error: invalid keyPath
我认为也许我需要将 subList 设置为 List()
;我在尝试此操作时遇到了同样的错误。
最佳答案
如果我正确理解了问题,您希望返回第一个元素为的 collection
:
{
id : 1,
subList: [
{name: "sublist item"}
]
}
为此,我们需要进行一些更改。
使用
Immutable.fromJS
将普通的 JS 对象数组深度转换为不可变的映射列表使用
List.update()
返回具有更新值的新List
使用
Map.updateIn()
返回具有更新值的新 LMapist
这是整个事情:
const List = Immutable.List;
const items = [{
id: 1,
subList: []
},
{
id: 2,
subList: []
},
{
id: 3,
subList: []
}
];
const newItem = {
name: "sublist item"
};
let collection = Immutable.fromJS(items);
collection = collection.update(0, item => {
return item.updateIn(['subList'], subList => {
return subList.concat(newItem);
});
});
console.log(collection)
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.js"></script>
结果:
[
{
"id": 1,
"subList": [
{
"name": "sublist item"
}
]
},
{
"id": 2,
"subList": []
},
{
"id": 3,
"subList": []
}
]
更新: List.updateIn()
可以使用索引作为键路径,因此您可以将其简化为以下内容:
collection = collection.updateIn([0, 'subList'], subList => {
return subList.concat(newItem);
});
像这样:
const List = Immutable.List;
const items = [{
id: 1,
subList: []
},
{
id: 2,
subList: []
},
{
id: 3,
subList: []
}
];
const newItem = {
name: "sublist item"
};
let collection = Immutable.fromJS(items);
collection = collection.updateIn([0, 'subList'], subList => {
return subList.concat(newItem);
});
console.log(collection)
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.js"></script>
关于javascript - ImmutableJS - 插入嵌套数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46646920/