mapStateToProps必须返回一个对象。取而代之的是未定义的

时间:2016-07-21 14:53:20

标签: reactjs redux phoenix-framework react-redux

我正在使用与前端的redux做出反应并调用elixir phoenix后端API。 一切似乎都有效,但我在我的javascript控制台中有这个错误

Error: mapStateToProps must return an object. Instead received undefined.

我已经实现了redux记录器,这是从他身上看到的对象 ReduxLog

我看不到任何不正确的内容,在操作后对象都是正确的。我可以在凤凰中看到用户已经加入套接字和频道。

因为此错误似乎在mapStateToProps附近,所以我更好地查看了该代码

import React from 'react';
import {
  connect
}
from 'react-redux';

class AuthenticatedContainer extends React.Component {
  componentDidMount() {
    const {dispatch} = this.props;
  }

  render() {
    const {currentUser, dispatch, socket} = this.props;
    if (!currentUser) return false;
    return ( < div id = "authentication_container"
      className = "application-container" >
      < div className = "main-container" > {
        this.props.children
      } < /div>
            </div >
    );
  }
}

const mapStateToProps = (state) => ({
  currentUser: state.session.currentUser,
  socket: state.session.socket,
  channel: state.session.channel,
});
export
default connect(mapStateToProps)(AuthenticatedContainer);

然后是会话缩减器

import Constants from '../constants';

const initialState = {
    currentUser: null,
    socket: null,
    channel: null,
    error: null,
};

export default function reducer(state = initialState, action = {}) {
    console.log(action)
    switch(action.type) {
        case Constants.CURRENT_USER:
            return { ...state, currentUser: action.currentUser, socket: action.socket, channel: action.channel};

        case Constants.USER_SIGNED_OUT:
            return initialState;

        case Constants.SESSIONS_ERROR:
            return { ...state, error: action.error };

        default:
            return state;
    }
}

和组合减速器

import { combineReducers }  from 'redux';
import { routerReducer }     from 'react-router-redux';
import session              from './session';
import registration         from './registration';

export default combineReducers({
    routing: routerReducer,
    session: session,
    registration: registration,
});

当我浏览我的代码并尝试调试时,如果没有为这些道具定义状态,我找不到任何实例。 我使用了https://github.com/bigardone/phoenix-trello中的大量代码。

非常感谢所有帮助。

祝你好运 的Björn

1 个答案:

答案 0 :(得分:1)

我发现了导致这个问题的原因。 一旦Redux调用完成,代码就会继续,并将我重定向到另一个控制器。该控制器有一个视图和一个具有未定义值的mapStateToProps。修复了这个错误并且错误消失了。

但是对于我有限的Redux知识,我正在查看错误的东西,因为我可以看到记录器在“CURRENT_USER”操作中失败了。当它实际上在动作“FETCH_MILESTONE”失败时,女巫将未定义的值映射到道具。 将对这个主题做一些阅读,如果有人读到这个并且对实际发生的事情有很好的理解,那将是值得赞赏的。

可能修复其他人看到此问题,检查对mapStateToProps的所有调用,看看是否有任何值未定义。