ImmutableJS - valeur de mise à jour dans une liste

Question

J'ai une carte comme celui-ci (en ImmutableJS):

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

Et je veux mettre à jour la valeur « à l'intérieur » dans la deuxième entrée dans le tableau « de arrayOfValues ​​». Comment puis-je le faire? Voilà ce que j'ai maintenant et il dit « Uncaught Erreur: KeyPath invalide »

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

J'ai essayé aussi directement cela et cela n'a pas fonctionné:

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

Après plusieurs heures de recherche de la solution , J'apprécie toute aide. Je vous remercie.

Answer 1

Votre setIn exemple fonctionne comme vous devriez voir dans ce plunkr: http://plnkr.co/edit/1uXTWtKlykeuU6vB3xVO?p=preview

Peut-être que vous assumez la valeur de theMap sera modifiée à la suite de l'setIn?

Comme ces structures sont immuables, vous devez saisir la valeur modifiée dans une nouvelle variable var theMap2 = theMap.setIn(['arrayOfValues',1,'one','inside'],'updated value');

Answer 2

Ce que vous faites est correct (voir ce 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' } }, 
// ] 
// } 

Lorsque vous appelez orig.setIn(), il ne modifie pas directement orig. C'est tout le but de cette bibliothèque Immutable. Il ne mute pas les données existantes mais en crée une nouvelle à partir de l'existant.

Answer 3

activePane is the index of Object in Array(List) that I had to modify

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