Iterazione tramite chiavi della mappa immutabile in React

Question

Che cosa è una buona pratica per gestire l'iterazione tramite un oggetto Mappa Immutable.js? Questo funziona:

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

ma dà l'avviso nella console "warning.js: 45. Attenzione: Uso delle mappe come i bambini non è ancora pienamente supportato Si tratta di una funzione sperimentale che potrebbe essere rimosso convertirlo in una sequenza./iterable di ReactElements con chiave invece. "

Questo è stato discusso in precedenza, e questo link suggerisce alcune strategie https://github.com/facebook/immutable-js/issues/667 ma mi sembrano goffe. Ad esempio:

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

funziona ma è una sensazione goffa. C'è un modo più naturale di farlo?

Answer 1

Poiché hai posto questa domanda, è stata pubblicata una soluzione migliore sul problema github a cui fai riferimento. @vinnymac suggerisce:

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

questo funziona bene perché entrySeq() restituisce una sequenza di tuple chiave/valore, che è quindi possibile destrutturare nei params del .map() callback.

modifica Ora vedo che stai solo chiedendo le chiavi. In tal caso, utilizzare keySeq() se si desidera utilizzare ImmutableJS map() o keys() se si desidera utilizzare ES6 map()

Answer 2

Perché non stock.keys()? Come si restituisce un iteratore ES6, avrete bisogno di lanciarlo ad un array per farlo funzionare nelle vecchie versioni JS: Array.from(stock.keys())

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

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

Si noti che ho evitato key come una variabile e poi passò il valore index come key al componente figli, questo è dovuto al fatto che la reazione richiede riferimenti a componenti creati dinamicamente in modo che possano gestirli correttamente all'interno del suo VirtualDOM. Maggiori informazioni su React's Dynamic Children.