首页 > 解决方案 > Immutable.js 不呈现列表数据

问题描述

我的减速器看起来像这样:

import { fromJS } from 'immutable';
const GET_LIST = 'GET_LIST';

const initialState = fromJS({
  list: [{
         ID: 1
  },
  {
    ID: 2
}]
});

function reducer(state = initialState, action) {
  switch (action.type) {
    case GET_LIST:
      return state
        .set('list', action.payload);
    default:
      return state;
  }
}
export default reducer;

这就是我的组件的样子:

class App extends Component {

    render () {
        return ( 
        <div className="container">  
        <table className="table table-striped">

          <tbody >                          

              {this.props.list.map(item => {
                console.log('Item: ' + item.get('ID'))
                return (
                  <div>{item.get('ID')}</div>
                );
              })}
           </tbody>
        </table>
      </div>
        );
    }
}

const mapStateToProp = (state) => {
  console.log('state list: '+ state.reducer.get('list') );
    return {
      list: state.reducer.get('list'),
    }
  }

问题是:我正在尝试遍历“this.props.list”,但它没有在我的 html 页面中呈现数据。但是当我尝试 console.log 列表时,它在浏览器控制台中显示数据,但数据不会在 html 页面中呈现。我想在页面中显示 initialState 数据。

这是它在控制台中的显示方式: 在此处输入图像描述

请任何人对此有解决方案。我希望每个人都明白这个问题。

标签: reactjsreduxreact-reduxredux-thunkredux-saga

解决方案


推荐阅读