React/Redux 无法读取未定义的属性“currentOpportunities”答案

【问题标题】：React/Redux cannot read property "currentOpportunities" of undefinedReact/Redux 无法读取未定义的属性“currentOpportunities”
【发布时间】：2019-03-04 21:12:28
【问题描述】：

我的 Redux mapStateToProps 函数出现问题，抛出一个错误，指出 state.currentOpportunities 未定义。奇怪的是，organizationReducer 中定义的初始状态只能在 state._root.entries1.organization.currentOpportunity 而不是 state.organization.currentOpportunity 当我 console.log 我 console.log主 index.js 文件中的状态

Console.log(States)

主 App.js 文件

const initialState = {}
const history = createHistory();
const store = configureStore(initialState, history);
const MOUNT_NODE = document.getElementById('app');

const render = messages => {
  ReactDOM.render(
    <Provider store={store}>
      <LanguageProvider messages={messages}>
        <ConnectedRouter history={history}>
          <App />
        </ConnectedRouter>
      </LanguageProvider>
    </Provider>,
    MOUNT_NODE,
  );
};

organizationReducer.js

const initialState = {
    currentOpportunities: [],
    expiredOpportunities: []
};

export default function (state=initialState, action) {
    switch(action.type) {
        case FETCH_ORGANIZATION_OPPORTUNITIES:
            return {...state, data: action.payload}
        case FETCH_CURRENT_OPPORTUNITIES: 
            return{...state, currentOpportunities: action.payload}
        case FETCH_EXPIRED_OPPORTUNITIES: 
            return{...state, expiredOpportunities: action.payload}
        default:
            return state
    }
}

我的根减速器文件

export default function createReducer(injectedReducers) {
  return combineReducers({
    organization: organizationReducer,
    ...injectedReducers
  })
}

index.js 文件

const mapStatetoProps = (state) => {
  console.log(state)
  return {
    currentOpportunities: state.organization.currentOpportunities,
    expiredOpportunities: state.organization.expiredOpportunities
  };
}

export default connect(mapStatetoProps, actions)(OpportunitiesPage);

有人知道这里会发生什么吗？

【问题讨论】：

你能访问organization reducer吗？我的意思是你能用 Redux-dev-tools 检查它，看看里面有什么吗？
我检查了 Redux-dev-tools，它看起来像在 state 选项卡下的 @@init 下，它显示了 currentOpportunities 和 expiredOpportunities 的组织初始化值作为来自 reducer 的空数组。
@riku12764，你的action.payload 的结构是什么？也许您还想仔细检查为什么FETCH_ORGANIZATION_OPPORTUNITIES 中有一个data 键。
你注入的Reducers里面是什么？
@George.S，目前injectedReducers 内部没有任何内容（只是一个占位符，直到我让它在最基本的级别上工作）

标签： javascript reactjs redux react-redux

【解决方案1】：

state.organization.currentOpportunity 是未定义的，因为 state 是一个不可变的映射，并且您尝试访问它的字段，就像它是一个对象一样。 ¹

您必须更新您的 reducer 逻辑以使用不可变 API 来合并对象例如

   case FETCH_ORGANIZATION_OPPORTUNITIES:
        return state.merge({data: action.payload})

或者从不可变数据结构转换为可变 javascript 对象。例如

  stateObject = state.toJS()
  return {
      currentOpportunities: stateObject.organization.currentOpportunities,
      //...

由于跟踪对象实例的状态可能会导致一些麻烦，因此我建议在组件状态中坚持使用不可变数据结构或可变 Javascript 对象。

这是使用不可变地图 API 的 mapStateToProps。 ²

  return {
      currentOpportunities: state.getIn(['organization', 'currentOpportunities'])
      //...

【讨论】：

... 是object spread operator。 mapStateToProps 的返回是一个新对象，因此当在组件中使用 props 时，它根本不会修改 state。因此，这并不能直接回答问题，只是建议使用其他库。
@codekaizer 我不建议使用另一个库。该库已被使用，但 OP 似乎将 Javascript 对象与不可变的地图实例混淆了。我建议 OP 坚持使用状态中的 Javascript 对象或使用不可变的地图对象。
嗨@OluwafemiSule，我在上面尝试了你的建议，但我遇到了和以前一样的错误。据我所知，似乎 mapStatetoProps 是在动作完全可以运行之前发生的。仍然不确定是什么问题