ImmutableJS - 更新列表中的值答案

【问题标题】：ImmutableJS - update value in a ListImmutableJS - 更新列表中的值
【发布时间】：2015-08-01 23:50:31
【问题描述】：

我有一个这样的地图（在 ImmutableJS 中）：

{arrayOfValues: [
  {one: {inside: 'first in array'}},
  {one: {inside: 'second in array'}}
]}

我想更新“arrayOfValues”数组中第二个条目中的“内部”值。我该怎么做？这就是我现在所拥有的，上面写着“未捕获的错误：无效的 keyPath”

theMap.update('arrayOfValues',(list)=>{
  return list.setIn([1,'one','inside'],'updated value'); 
})

这个我也直接试过了，还是不行：

theMap.setIn(['arrayOfValues',1,'one','inside'],'updated value');

在寻找解决方案几个小时后，我感谢任何帮助。谢谢。

【问题讨论】：

你的例子对我有用，没有错误。
你不能更新不可变结构。

标签： javascript reactjs immutable.js

【解决方案1】：

你所做的是正确的（见JSBin）。

const orig = Immutable.fromJS({
  arrayOfValues: [
    { one: { inside: 'first in array' } },
    { one: { inside: 'second in array' } },
  ]
});

const updated = orig.setIn(['arrayOfValues', 1, 'one', 'inside'], 'updated value');

console.log(updated.toJS());

// {
//   arrayOfValues: [
//     { one: { inside: 'first in array' } },
//     { one: { inside: 'second in array' } },
//   ]
// }

当您调用orig.setIn() 时，它不会直接修改orig。这就是这个Immutable 库的全部目的。它不会改变现有数据，而是从现有数据中创建一个新数据。

【讨论】：

所以“它不会改变现有数据，而是从现有数据中创建一个新数据”——从逻辑上讲，我们是否将新对象作为状态返回？对我来说有点模糊
@steveinatorx：没错。您应该将新对象 (updated) 作为状态返回。 orig 仍然指的是旧数据（即updated !== orig）

【解决方案2】：

您的 setIn 示例的工作原理与您在此 plunkr 中应该看到的一样： http://plnkr.co/edit/1uXTWtKlykeuU6vB3xVO?p=preview

也许您假设theMap 的值将因setIn 而改变？

由于这些结构是不可变的，您必须将修改后的值捕获到一个新变量中，如var theMap2 = theMap.setIn(['arrayOfValues',1,'one','inside'],'updated value');

【讨论】：

【解决方案3】：

activePane 是我必须修改的 Array(List) 中 Object 的索引

case CHANGE_SERVICE:
  var obj = {
    title: '1212121 Tab',
    service: '',
    tagName: '',
    preDefinedApi: '',
    methodType: '',
    url: '',
    urlParams: [{
      label: '',
      name: '',
      value: '',
    }],
    headers: [{
      label: '',
      name: '',
      value: '',
    }],
  };
  var activePane = state.get('activePane');
  var panes = state.setIn(['panes', activePane, 'service'], action.val);

  return state.setIn(['panes', activePane, 'service'], action.val);

【讨论】：