ImmutableJS - обновить значение в списке

У меня есть карта, подобная этой (в 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');

После нескольких часов поиска решения я ценю любую помощь. Спасибо.

Ответы

Ответ 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. Он не мутирует существующие данные, а создает новый из существующего.

Ответ 2

Ваш пример setIn работает так, как вы должны видеть в этом plunkr: http://plnkr.co/edit/1uXTWtKlykeuU6vB3xVO?p=preview

Возможно, вы считаете, что значение theMap будет изменено в результате setIn?

Поскольку эти структуры неизменяемы, вы должны зафиксировать измененное значение в новой переменной как var theMap2 = theMap.setIn(['arrayOfValues',1,'one','inside'],'updated value');

Ответ 3

activePane - это индекс объекта в массиве (список), который мне пришлось изменить

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);