React Redux - 从 Immutable 渲染时道具未定义

Question

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

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

您正在调用 d.works 但未定义。我认为在您进入初始状态时的操作中，您还需要定义 works

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

Answer 2

因为你使用的是 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')
  }

React Redux - 从 Immutable 渲染时道具未定义

React Redux - props are undefined while rendering from Immutable

javascript

reactjs

react-redux