将单个元素添加到不可变列表答案

【问题标题】：Adding single element to an immutable list将单个元素添加到不可变列表
【发布时间】：2017-08-21 15:50:08
【问题描述】：

我只想将一个元素添加到我的不可变对象树中某处的列表中。

这里似乎已经回答了这个问题：

但由于某种原因，它对我不起作用。

如果我有以下代码：

var myState = {
  a: {
    b: {
      c: [
        {name: 'hi', value: 2},
        {name: 'howdy', value: 3}
      ]
    }
  }
}
myState = Immutable.fromJS(myState);
myState = myState.update(['a', 'b', 'c'], function (myList) {
  myList.push({"name": "hallo", "value": 4})
  }
);

我收到一个错误：

未捕获的类型错误：无法读取未定义的属性“推送”

表示传入回调的 myList 参数为空。

为什么会这样？

小提琴：

https://codepen.io/owatkins/pen/brMava

【问题讨论】：

How to update element inside List with ImmutableJS?的可能重复
查看我的答案：stackoverflow.com/a/39788499/3507464
几乎，您的示例处理更新数组中元素内部的内容。我只想向数组中添加一个元素。

标签： immutable.js

【解决方案1】：

应该这样写：

myState.updateIn(['a', 'b', 'c'], function (myList) {
    return myList.push({"name": "hallo", "value": 4})
  }
);

下面是一个工作示例：

var myState = Immutable.fromJS({
  a: {
    b: {
      c: [{
          name: 'hi',
          value: 2
        },
        {
          name: 'howdy',
          value: 3
        }
      ]
    }
  }
})

myState = myState.updateIn(['a', 'b', 'c'], function(myList) {
  return myList.push({
    "name": "hallo",
    "value": 4
  })
});

console.info('myState = ' + myState.toJS())

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js"&gt;&lt;/script&gt;

请注意，我使用的是 updateIn 而不是 update 并返回 push 的结果

【讨论】：

对不起，对我不起作用。 myList 在此也未定义。

【解决方案2】：

经过大量的填充，我能想出的唯一解决方案是获取数组，然后转换为 JS，将一个元素推送到它上面，然后将其转换回不可变的......然后使用 setIn ，不是 updateIn，也不是 update。

var myState = {
  a: {
    b: {
      c: [
        {name: 'hi', value: 2},
        {name: 'howdy', value: 3}
      ]
    }
  }
}
myState = Immutable.fromJS(myState);

var list = myState.getIn(['a', 'b', 'c'])
var list = list.toJS();

list.push({"name": "hallo", "value": 4});

var v = Immutable.fromJS(list)

myState = myState.setIn(['a', 'b', 'c'], v)

这看起来像一个可怕的解决方案，但它是迄今为止唯一对我有用的东西。

通常需要大约 5 分钟的时间来学习如何将元素添加到框架或语言的列表中。

没想到要花 5 个HOURS。

这个框架的文档是绝对的耻辱。

【讨论】：