wake-up-neo.net

Aktualisieren Sie eines der Objekte im Array auf unveränderliche Weise

In Reacts this.state habe ich eine Eigenschaft namens formErrors, die das folgende dynamische Array von Objekten enthält.

[
  {fieldName: 'title', valid: false}, 
  {fieldName: 'description', valid: true},
  {fieldName: 'cityId', valid: false},
  {fieldName: 'hostDescription', valid: false},
]

Nehmen wir an, ich müsste das Objekt des Zustands mit dem Feldnamen cityId auf den gültigen Wert von true aktualisieren.

Was ist der einfachste oder gebräuchlichste Weg, dies zu lösen?

Ich kann jede der Bibliotheken immutability-helper , immutable-js etc oder ES6 verwenden. Ich habe es über 4 Stunden lang versucht und gegoogelt und kann meinen Kopf immer noch nicht darum wickeln. Wäre extrem dankbar für etwas Hilfe.

javascriptreactjsecmascript-6immutability
15
Fellow Stranger

Sie können map verwenden, um die Daten zu iterieren und nach fieldName zu suchen. Wenn fieldName cityId ist, müssen Sie den Wert ändern und ein neues Objekt zurückgeben ansonsten nur return die gleiche object.

Schreibe es so:

var data = [
    {fieldName: 'title', valid: false}, 
    {fieldName: 'description', valid: true},
    {fieldName: 'cityId', valid: false},
    {fieldName: 'hostDescription', valid: false},
]

var newData = data.map(el => {
                  if(el.fieldName == 'cityId')
                     return Object.assign({}, el, {valid:true})
                  return el
              });

this.setState({ data: newData });
19
Mayank Shukla

Wie wäre es mit Unveränderlichkeitshilfe ? Funktioniert sehr gut. Ich denke, Sie suchen nach dem $merge-Befehl.

@FellowStranger: Ich habe einen (und nur einen) Abschnitt meines Redux-Status, der ein Array von Objekten ist. Ich verwende den Index im Reducer, um den korrekten Eintrag zu aktualisieren:

case EMIT_DATA_TYPE_SELECT_CHANGE:
  return state.map( (sigmap, index) => {
    if ( index !== action.payload.index ) {
      return sigmap;
    } else {
      return update(sigmap, {$merge: {
        data_type: action.payload.value
      }})
    }
})

Ehrlich gesagt, das ist etwas schmierig und ich beabsichtige, diesen Teil meines Zustandsobjekts zu ändern, aber es funktioniert ... Es klingt nicht nach Redux, aber die Taktik sollte ähnlich sein.

1
Omortis

Anstatt Ihre Werte in einem Array zu speichern, empfehle ich dringend, stattdessen ein Objekt zu verwenden, damit Sie einfach angeben können, welches Element Sie aktualisieren möchten. Im folgenden Beispiel ist der Schlüssel der Feldname, es kann jedoch eine eindeutige Kennung sein:

var fields = {
    title: {
        valid: false
    },
    description: {
        valid: true
    }
}

dann können Sie die update-Funktion der Unveränderlichkeitshilfe verwenden:

var newFields = update(fields, {title: {valid: {$set: true}}})
1
FuzzyTree

Hier ist ein Beispiel - ES6

Left ist der Code und right ist die Ausgabe

 enter image description here

Hier ist der Code unten

const data = [
    { fieldName: 'title', valid: false }, 
    { fieldName: 'description', valid: true },
    { fieldName: 'cityId', valid: false }, // old data
    { fieldName: 'hostDescription', valid: false },
]

const newData = data.map(obj => {
  if(obj.fieldName === 'cityId') // check if fieldName equals to cityId
     return {
       ...obj,
       valid: true,
       description: 'You can also add more values here' // Example of data extra fields
     }
  return obj
});

const result = { data: newData }; 

console.log(result);

this.setState({ data: newData });

Hoffe das hilft, Happy Coding!

0
EsterlingAccime Youtuber