react-addons-update - Wie fügt man ein Objekt tief in ein Array von Objekten ein?

Ich verwende das react-addons-update npm-Paket mit meiner React-Anwendung und möchte speziell die Methode update() verwenden, um ein neues Objekt tief in ein Array von Objekten einzufügen. Ich habe diese Struktur als Teil meiner Komponente Zustand:react-addons-update - Wie fügt man ein Objekt tief in ein Array von Objekten ein?

... 
constructor(props) { 
    super(props); 
    this.state = { 
     blocks: [ 
      { 
       block_title: "some title", 
       items: [ 
        { 
         item_title: "foo" 
        }, 
        { 
         item_title: "bar" 
        } 
       ] 
      }, 
      { 
       ... 
      } 
     ] 
    }; 
} 
...

und ich möchte ein neues Element in die items Array einfügen, zwischen dem ersten und dem zweiten Element.

Ich habe dies versucht:

... 
insertItem(){ 
    let obj = { 
     item_title: "in between foo and bar" 
    }; 
    this.setState({ 
     blocks: update(this.state.blocks, { 
      [0]: { 
       items: {$splice: [[1, 0, obj]]} 
      } 
     }) 
    }); 
} 
...

aber dies scheint nicht zu funktionieren (keine Fehler entweder geworfen werden). Irgendwelche Ideen?

p.s. Ich benutze React innerhalb einer Meteor-Anwendung - nur für den Fall, dass es eine Eigenart gibt, die verhindert, dass diese Hilfsfunktion funktioniert.

Quelle

2016-08-24 JoeTidee

Was ist die Update-Methode? Blockiert eine 'Immutable.List'? Wenn ja, denke ich, dass Sie 'updateIn' verwenden müssen, und Sie müssten das Array separat rekonstruieren, bevor Sie es in die 'updateIn'-Methode übergeben. – RocketGuy3

Die update() -Methode ist eine Hilfsfunktion aus dem Paket react-addons-update npm. – JoeTidee

sieht aus wie Ihr Code funktionieren sollte. Könnte es etwas anderes sein als update? Wenn Sie Ihre Update-Funktion protokollieren würden, was ist das Ergebnis? –

Sie können Ihre anderen Methoden in der Komponente nicht sehen, aber versuchen Sie sicherzustellen, dass die Schlüsselstütze auf dem Element, das Sie für die hinzugefügten Elemente rendern, dort vorhanden und eindeutig ist.

Quelle

2016-08-25 08:46:12 goldbullet

Ich benutze console.log, um den Zustand der "Blöcke" auszudrucken, nachdem das Update gemacht wurde, so dass ein Schlüssel in diesem Fall nicht relevant ist .. – JoeTidee

Ist Ihre console.log in componentDidUpdate oder rendern? setState aktualisiert den Status asynchron, sodass der Status möglicherweise erst unmittelbar nach dem setState aktualisiert wird. – goldbullet

Gemäß dem Kommentar von Goldbullet aktualisiert setState den Zustand der Komponenten asynchron. Ich entdeckte, dass ein Prozess, der nach setState im Codeblock ausgeführt wurde, tatsächlich den Komponentenstatus erhielt, bevor es aktualisiert wurde. Daher ist die obige Syntax in der ursprünglichen Frage korrekt für das Einfügen eines Objekts tief in einem Array von Objekten.

Als Lösung habe ich die setState Callback-Option wie folgt:

... 
insertItem(){ 
    let obj = { 
     item_title: "in between foo and bar" 
    }; 
    this.setState({ 
     blocks: update(this.state.blocks, { 
      [0]: { 
       items: {$splice: [[1, 0, obj]]} 
      } 
     }) 
    },function(){ 
     // DO SOMETHING HERE!! 
    }); 
} 
...

Dies auch in diesem Beitrag erwähnt wurde Why calling react setState method doesn't mutate the state immediately?

Quelle

2016-08-25 16:53:57 JoeTidee

react-addons-update - Wie fügt man ein Objekt tief in ein Array von Objekten ein?

Antwort

Verwandte Themen