Question

通过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]} />
)

有效但笨重的感觉。有更自然的方式吗？

Answer 1

由于您提出了这个问题，因此您在引用的github问题上发布了更好的解决方案。 @vinnymac建议：

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

这很有效，因为entrySeq()会返回一个键/值元组序列，然后您可以在.map()回调的参数中进行解构。

编辑我现在看到您只是要求输入密钥。在这种情况下，如果您想使用ImmutableJS keySeq()或map()，如果您想使用ES6 keys()

，请使用map()

Answer 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传递给子组件，这是因为react需要引用动态创建的组件，以便它可以处理它们在VirtualDOM中正确使用。详细了解React＆＃39; s Dynamic Children。

Answer 3

使用不可变映射的reduce方法是更直接的方法。由于react需要一个数组，因此设置空数组的初始值并将jsx推送到其中即可解决此问题。同样适用于不可变的列表。

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

在React中迭代不可变映射的键

3 个答案: