Итерация через ключи неизменяемой карты в реале

Какова хорошая практика для обработки итерации через объект Immutable.js Map? Это работает:

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

но выдает предупреждение в консоли warning.js: 45 Предупреждение: использование карт в качестве дочерних объектов еще не полностью поддерживается. Это экспериментальная функция, которая может быть удалена. Вместо этого преобразуйте ее в последовательность/итерабельность с помощью клавишных ReactElements. "

Это обсуждалось ранее, и эта ссылка предлагает некоторые стратегии https://github.com/facebook/immutable-js/issues/667, но они кажутся неуклюжими для меня. Как:

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

работает, но неуклюжие чувства. Есть ли более естественный способ сделать это?

Ответы

Ответ 1

Поскольку вы задали этот вопрос, было найдено лучшее решение по проблеме github, с которой вы ссылаетесь. @vinnymac предлагает:

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

это хорошо работает, потому что entrySeq() возвращает последовательность цепочек ключей/значений, которые затем можно разрушить в параметрах обратного вызова .map().

edit Теперь я вижу, что вы только запрашиваете ключи. В этом случае используйте keySeq(), если вы хотите использовать ImmutableJS map() или keys(), если вы хотите использовать ES6 map()

Ответ 2

Почему бы не stock.keys()? Поскольку он возвращает итератор ES6, вам нужно отдать его в массив, чтобы он работал в более старых версиях JS: Array.from(stock.keys())

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

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

Обратите внимание, что я избегал key в качестве переменной, а затем передал значение index как key для дочернего компонента, это потому, что реакция требует ссылок на динамически созданные компоненты, чтобы он мог корректно обрабатывать их в своем VirtualDOM. Подробнее о React Динамические дети.

Ответ 3

Использование метода Immutable Map Reduce - более прямой подход. Так как реагирует на массив, поэтому установка начального значения пустого массива и вставка в него jsx решает проблему. Работает и для неизменного списка.

{
   stocks.reduce((jsxArray, stock, index) => {
      jsxArray.push(
        <h3 key={index}>{index}</h3>,
      )
      return jsxArray;
   }, [])
}