javascript - React Redux - 从 Immutable 渲染时 Prop 未定义

Question

我想将 ImmutableJS 合并到我的 React 应用程序中。所以现在我的 reducer 看起来像这样:

import { Map } from 'immutable'

const initialState = Map({
  data: [],
  sections: []
});

const AppState = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_CONTENT':
      return state.set('data', action.response);
    case 'ADD_SECTION':
      return state.set('sections', [ ...state.get('sections'), action.payload ]);
    default:
      return state;
  }
};

export default AppState;

这一切都很好。但是在我的组件中我有 mapStateToProps:

const mapStateToProps = (state) => {
  const d = state.app.get('data');

  return {
    works: d.works,
    pages: d.pages,
    sections: state.app.get('sections')
  }
};

然后我想显示数据:

  {
    this.props.works.map(d => {
      return <div>d</div>
    })
  }

我得到了

TypeError: this.props.works.map is not a function

当我改为使用 console.log 时，我发现 this.props.works 未定义。我能做什么？

Answer 1

因为你使用的是 Immutable JS

在你的mapStateToProps

const mapStateToProps = (state) => {
  const d = state.app.get('data');

  return {
    works: d.works,
    ...

要从 d 访问数据，请更改访问数据的方式，从 d.works 到 d.get('works')

  return {
    works: d.get('works'),
    pages: d.get('pages'),
    sections: state.app.get('sections')
  }