javascript - ImmutableJS - 插入嵌套数组

Question

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()；尝试此操作时出现同样的错误。

Answer 1

如果我对问题的理解正确，你想返回 collection，第一个元素为:

{
  id : 1,
  subList: [
    {name: "sublist item"}
  ]
}

为此，我们需要进行一些更改。

1. 使用 Immutable.fromJS将普通的 JS 对象数组深度转换为不可变的映射列表

2. 使用 List.update()返回具有更新值的新 List

3. 使用 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>