ImmutableJS - pousser dans un tableau imbriqué

Question

```html

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

Résultats :

Erreur : chemin de clé invalide

Je pense qu'il est peut-être nécessaire de définir subList comme une List() ; Je reçois la même erreur en essayant cela.

```

Answer 1

Si je comprends bien la question, vous souhaitez retourner collection avec le premier élément comme suit :

{
  id : 1,
  subList: [
    {name: "élément de sous-liste"}
  ]
}

Pour ce faire, nous devrons apporter quelques modifications.

1. Utilisez Immutable.fromJS pour convertir profondément le tableau JS simple d'objets en une Liste Immutable de Maps

2. Utilisez List.update() pour retourner une nouvelle List avec la valeur mise à jour

3. Utilisez Map.updateIn() pour retourner une nouvelle Map avec la valeur mise à jour

Voici le code complet :

const List = Immutable.List;
const items = [{
    id: 1,
    subList: []
  },
  {
    id: 2,
    subList: []
  },
  {
    id: 3,
    subList: []
  }
];
const newItem = {
  name: "élément de sous-liste"
};

let collection = Immutable.fromJS(items);

collection = collection.update(0, item => {
  return item.updateIn(['subList'], subList => {
    return subList.concat(newItem);
  });
});

console.log(collection)

Et voici le résultat :

[
  {
    "id": 1,
    "subList": [
      {
        "name": "élément de sous-liste"
      }
    ]
  },
  {
    "id": 2,
    "subList": []
  },
  {
    "id": 3,
    "subList": []
  }
]

Mise à jour : List.updateIn() peut utiliser un index comme chemin d'accès, vous pouvez donc simplifier ceci comme suit :

collection = collection.updateIn([0, 'subList'], subList => {
  return subList.concat(newItem);
});

Comme ceci :

const List = Immutable.List;
const items = [{
    id: 1,
    subList: []
  },
  {
    id: 2,
    subList: []
  },
  {
    id: 3,
    subList: []
  }
];
const newItem = {
  name: "élément de sous-liste"
};

let collection = Immutable.fromJS(items);

collection = collection.updateIn([0, 'subList'], subList => {
  return subList.concat(newItem);
});

console.log(collection)

Answer 2

Utilisez l'objet que vous avez obtenu, mettez à jour le sous-tableau et retournez l'ensemble de l'objet.

const List = Immutable.List;
const items = [
  { id: 1, subList: [] }, 
  { id: 2, subList: [] }, 
  {id: 3, subList: [] }
];
const newItem = { name: "élément de sous-liste" };

let collection = List(items);

collection = collection.update([0], function (obj) {
   obj.subList = obj.subList.concat(newItem)
   return obj;
});

Answer 3

Cela ne fonctionne pas car les éléments de votre Immutable.List sont des objets JavaScript ordinaires (POJO), pas des Immutable.Map, donc updateIn ne sait pas comment travailler avec eux. Vous pouvez soit:

• Rendre les objets Immutable.Map en utilisant Immutable.fromJS au lieu de Immutable.List en tant que constructeur pour convertir l'ensemble du graphe d'objets en objets Immutable. (Voir JS Bin)
• Utiliser update([0]) au lieu de updateIn pour simplement obtenir le POJO et le muter (comme dans la réponse de @Navjot).