Question

为了管理我的不可变redux状态，我需要读取一个Immutable状态并根据它来渲染组件。

中的此代码

我的实际代码很长，但总结它可能是这样的：

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参数并尝试在读取时动态渲染元素：

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'。没有组件被渲染： - （

我应该得到类似的东西（从Filter1和Filter2组件返回值）：

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

Filter1和Filter2代码：

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) => {

Map用于从上一个列表创建一个新列表，将每个元素转换为由提供的函数返回的元素。另一方面，forEach没有返回值，因此没有任何内容呈现。

从Immutable.js映射动态呈现组件

1 个答案: