從Immutable.js映射Dinamically呈現組件

Question

爲了管理我的不可變redux狀態，我需要讀取Immutable狀態並基於它呈現組件。

請參閱從webpackbin

這個代碼我實際的代碼是很長，但總結它可能是這樣的：

import React from 'react' 
import {render} from 'react-dom' 
import {fromJS} from 'immutable' 
import Filters from './Filters' 


const data = fromJS({ 
    Filter1: ['english', 'french', 'spanish'], 
    Filter2: ['small', 'big'] 
}) 

render(<Filters filterMap={data} />, document.querySelector('#app')) 

我需要使所有的過濾器，所以我讀filterMap參數嘗試dinamically渲染元素，因爲我讀它：

import React, { PropTypes } from 'react' 
import {fromJS, map} from 'immutable' 
import Filter1 from './Filter1' 
import Filter2 from './Filter2' 

const filters = { Filter1, Filter2 } 

const Filter = ({ filterMap }) => (
    <div> 
    { filterMap.entrySeq().forEach((item) => { 
     const FilterElement = filters[item[0]] 
     console.log('item0: ' + item[0]) 
     console.log('item1:' + item[1]) 
     console.log (FilterElement) 
     return <FilterElement /> 
    }) 
    } 
    </div> 
) 

export default Filter 

但是，我只得到一個數字'2'。號成分得到呈現:-(

我應該得到這樣的事情（從過濾器1和過濾器2組件返回值）：

<h1>This is filter1</h1> 
<h1>This is filter2</h1> 

過濾器1和過濾器2的代碼：

import React from 'react' 

function Filter2() { 
    return (
    <h1>This is filter2</h1> 
) 
} 

export default Filter2 

Answer 1

使用map函數，而不是forEach：

{ filterMap.entrySeq().forEach((item) => { 
// change to: 
{ filterMap.entrySeq().map((item) => { 

地圖用於從前面的列表中創建一個新列表，將每個元素轉換爲由提供的函數返回的元素。另一方面，forEach沒有返回值，因此沒有任何呈現。