Qu'est-ce qui est une bonne pratique pour manipuler l'itération via un objet de carte immutable.js? Cela fonctionne: mais donne l'avertissement dans la console "Avertissement.js: 45 AVERTISSEMENT: L'utilisation de cartes comme enfants n'est pas encore entièrement prise en charge. C'est une fonctionnalité expérimentale qui pourrait être supprimée. Convertir à une séquence / iTable de réactionnements clés à la place. " Ceci a été discuté auparavant, et ce lien suggère certaines stratégies https://github.com/facebook/immutable-js/issues/667 Mais ils me semblent maladroits. Comme: fonctionne mais est un sentiment de maladresse. Y a-t-il un moyen plus naturel de faire cela?
3 Réponses :
Pourquoi pas Notez que j'ai évité clé comme une variable puis passa la valeur index comme clé à la composante enfants, c'est parce que c'est parce que réagit a besoin de références sur des composants créés de manière dynamique afin qu'il puisse les gérer correctement dans son virtual. En savoir plus sur React's Enfants dynamiques . stock.keys () ? Comme il renvoie un itérateur ES6, vous devrez la jeter à un tableau pour qu'il fonctionne dans des versions JS plus anciennes: array.from (stock.keys ())
Depuis que vous avez posé cette question, une meilleure solution a été postée sur le problème GitHub que vous référence. @vinnymac suggère: ceci fonctionne bien car Modifier Je vois maintenant que vous ne demandez que les clés. Dans ce cas, utilisez entrée () renvoie une séquence de tuples de clé / valeur, que vous pouvez alors détruire dans les params du .map () rappel. keyseq () si vous souhaitez utiliser ImmUTABLEJS MAP () ou Touches () Si vous souhaitez utiliser ES6 mapper ()
L'utilisation de la méthode de réduction de la carte immuable est une approche plus directe. Depuis que réagir attend un tableau afin de définir une valeur initiale de la matrice vide et de pousser JSX dans celle-ci résout le problème. Fonctionne aussi pour une liste immuable.
{
stocks.reduce((jsxArray, stock, index) => {
jsxArray.push(
<h3 key={index}>{index}</h3>,
)
return jsxArray;
}, [])
}
J'ai rencontré le même problème récemment et a fini par utiliser
entrée () aussi. Je pense que la seule autre alternative serait d'utilisertojs () qui n'est pas moins clunky et probablement moins performant.Merci pour l'entrée