Iterieren durch Schlüssel der unveränderlichen Karte in Reagieren

Question

Was ist eine gute Übung für die Behandlung von Iteration durch ein Immutable.js-Map-Objekt? Dies funktioniert:

{stocks.map((stock,key)=>{ 
    return (<h3>{key}</h3>) 
})} 

sondern gibt die Warnung in der Konsole „warning.js: 45. Achtung: Verwenden von Karten als Kinder ist noch nicht vollständig unterstützt Es ist eine experimentelle Funktion, die entfernt werden könnte konvertiert es in eine Sequenz./iterable von Keyed ReactElements stattdessen. "

Dies wurde zuvor diskutiert, und dieser Link schlägt einige Strategien https://github.com/facebook/immutable-js/issues/667, aber sie scheinen klobig zu mir. Wie:

posts.entrySeq().map(o => 
    <Post value={o[1]} key={o[0]} /> 
) 

funktioniert, aber ist klobig Gefühl. Gibt es einen natürlicheren Weg, dies zu tun?

Answer 1

Da Sie diese Frage gestellt haben, wurde eine bessere Lösung für das von Ihnen referenzierte GitHub-Problem bereitgestellt. @vinnymac schlägt vor:

posts.entrySeq().map(([key, value]) => 
    <Post key={key} value={value} /> 
) 

dies funktioniert gut, weil entrySeq() eine Sequenz von Schlüssel/Wert-Tupeln zurückgibt, die Sie dann in den params des .map() Rückruf destrukturiert kann.

bearbeiten Ich sehe jetzt, dass Sie nur nach den Schlüsseln fragen. mit `entrySeq()` Auch in diesem Fall verwenden keySeq() wenn Sie ImmutableJS map() oder keys() verwenden möchten, wenn Sie map() ES6

Answer 2

Warum nicht stock.keys()? Da es eine ES6 Iterator zurückgibt, müssen Sie es auf ein Array werfen es in älteren Versionen JS arbeiten: Array.from(stock.keys())

let zoo = Immutable.fromJS({ 'dog': 1, 'cat': 2 }) 

zoo.keys().map((name, index) => <Animal name={ name } key={ index } />) 

Beachten Sie, dass ich key als Variable vermieden und dann übergeben die index Wert als key Für die Children-Komponente ist dies der Fall, weil react Verweise auf dynamisch erstellte Komponenten benötigt, damit sie in ihrem VirtualDOM korrekt behandelt werden können. Lesen Sie mehr über Reacts Dynamic Children.