Wie aktualisiere ich ein Element in List mit ImmutableJS?

Mit .setIn() Sie können das gleiche tun:

let obj = fromJS({
  elem: [
    {id: 1, name: "first", count: 2},
    {id: 2, name: "second", count: 1},
    {id: 3, name: "third", count: 2},
    {id: 4, name: "fourth", count: 1}
  ]
});

obj = obj.setIn(['elem', 3, 'count'], 4);

Wenn wir nicht wissen, der index des Eintrags, die wir aktualisieren möchten. Es ist ziemlich leicht zu finden, es mit .findIndex():

const indexOfListToUpdate = obj.get('elem').findIndex(listItem => {
  return listItem.get('name') === 'third';
});
obj = obj.setIn(['elem', indexOfListingToUpdate, 'count'], 4);

Hoffe, es hilft!

InformationsquelleAutor der Antwort Albert Olivé

var index = list.findIndex(item => item.name === "three")
list = list.setIn([index, "count"], 4)

Erklärung

Aktualisieren Immutable.js Kollektionen immer wieder neue Versionen dieser Sammlungen dabei bleibt das original unverändert. Weil das so ist, können wir nicht verwenden JavaScript list[2].count = 4 mutation syntax. Stattdessen müssen wir Methoden aufrufen, wie viel wir tun könnten, mit Java-collection-Klassen.

Beginnen wir mit einem einfacheren Beispiel: nur das zählt in einer Liste.

var arr = [];
arr.push(2);
arr.push(1);
arr.push(2);
arr.push(1);
var counts = Immutable.List.of(arr);

Nun, wenn wir wollten-update der 3. Punkt, eine Ebene JS-array könnte wie folgt Aussehen: counts[2] = 4. Da kann man auch keine mutation, und eine Methode aufrufen müssen, sondern wir verwenden können: counts.set(2, 4) - das heißt, setzen Sie den Wert 4 am index 2.

Tief updates

Das Beispiel, das Sie gegeben hat, verschachtelten Daten, obwohl. Wir können nicht einfach set() auf die erste collection.

Immutable.js Sammlungen haben eine Familie von Methoden, mit Namen, mit der Endung "In", die es Ihnen gestatten, die tieferen Veränderungen, die in einem geschachtelten Satz. Die meisten common-Update-Methoden haben ein "In" - Methode. Zum Beispiel für set es ist setIn. Statt zu akzeptieren, ein index oder ein Schlüssel als das erste argument, diese "In" - Methoden akzeptieren einen "Schlüssel Weg". Der Pfad der Schlüssel ist ein array von Indizes oder Schlüsseln, die zeigt, wie man den Wert, den Sie aktualisieren möchten.

In Ihrem Beispiel, Sie wollten den Artikel aktualisieren in der Liste mit index 2, und dann den Wert im Schlüssel "count" innerhalb dieses Elements. So ist der Schlüssel Weg wäre [2, "count"]. Der zweite parameter der setIn Methode funktioniert genauso wie set es ist der neue Wert, den wir setzen wollen, also:

list = list.setIn([2, "count"], 4)

Suche nach dem richtigen Schlüssel Weg

Geht einen Schritt weiter, Sie tatsächlich sagte, Sie wollte den Artikel aktualisieren, wo der name ist "drei"die anders ist als nur das 3. Element. Zum Beispiel, vielleicht Ihre Liste ist nicht sortiert, oder vielleicht gibt es das Element mit Namen "zwei" war, die Sie zuvor entfernt haben? Das heißt, zunächst müssen wir sicherstellen, dass wir wirklich wissen, der richtige Schlüssel ist Weg! Für diese können wir die findIndex() - Methode (die, by the way, funktioniert fast genau wie Array#findIndex).

Haben wir einmal fand der index in der Liste, die das Element enthält, das wir aktualisieren möchten, können wir Ihnen die Schlüssel Weg, um die Werte, die wir aktualisieren möchten:

var index = list.findIndex(item => item.name === "three")
list = list.setIn([index, "count"], 4)

NB: Set vs Update

Ursprünglichen Frage erwähnt, die update-Methoden anstatt der set-Methoden. Ich erkläre das zweite argument in der Funktion (genannt updater), da es anders aus set(). Während das zweite argument set() ist der neue Wert, den wir wollen, das zweite argument update() ist ein Funktion die akzeptiert, dass der Vorherige Wert und gibt den neuen Wert, den wir wollen. Dann updateIn() ist das "In" variation von update() akzeptiert Schlüssel Weg.

Zum Beispiel sagen, wir wollten eine variation von Ihrem Beispiel, dass nicht nur die Grafen zu 4sondern erhöht der vorhandenen Zahl, wir könnten eine Funktion, die addiert, um den vorhandenen Wert:

var index = list.findIndex(item => item.name === "three")
list = list.updateIn([index, "count"], value => value + 1)

InformationsquelleAutor der Antwort Lee Byron