reactjs - Redux - mapDispatchToProps - TypeError：_this.props.setCurrentUserHandle 不是函数

Question

我试图让一个简单的 react-redux 应用程序工作，但我遇到了一个我无法弄清楚的奇怪错误。我试图简单地设置我当前用户的名字并处理商店，一个设置功能有效，另一个无效。

setCurrentUserFirstName - 有效 setCurrentUserHandle - 无效

    从'react'导入反应，{组件}；
    从'react-router'导入{链接}；
    从'react-redux'导入{连接}；
    从'../../store'导入商店；
    var Utilities = require('../../../common/commonutilities.js');
    var RestClient = require('../../../common/restClient.js');

    //动作
    从'../../actions/userActions'导入{ setCurrentUserHandle, setCurrentUserFirstName }；

    类头扩展组件{
      构造函数（道具）{
        超级（道具）；

        this.state = {};

        RestClient.api.fetchGet('/getcurrentuser', (response) => {
          如果（响应。成功）{
            这个.setState({
              isAuthenticated: 真,
              当前用户：response.currentUser
            });

            store.dispatch({
              类型：'USER_DID_LOGIN'，
              用户登录：真
            });

            //工作正常
            this.props.setCurrentUserFirstName(response.currentUser.firstName);      

            //不起作用并抛出错误：“TypeError：_this.props.setCurrentUserHandle is not a function”
            this.props.setCurrentUserHandle(response.currentUser.handle);

          }
        },
        （错误）=> {
          控制台日志（错误）；
        });
      }

      使成为（） {
        返回 （
          

            {this.props.user.currentUserFirstName}，{this.props.user.currentUserHandle}

          

        );
      }

    }

    常量 mapStateToProps = 函数（存储）{
      返回 {

             //用户属性
             用户：store.userState
      };
    };

    const mapDispatchToProps = (dispatch) => {

          返回{
            setCurrentUserFirstName: (currentUserFirstName) =>{
              调度（setCurrentUserFirstName（currentUserFirstName））；
            }
          }

          返回{
            设置当前用户句柄：（当前用户句柄）=>{
              调度（设置当前用户句柄（当前用户句柄））；
            }
          }     

    };


    //全部连接
    导出默认连接（mapStateToProps，mapDispatchToProps）（Header）；

我将它们作为 userActions.js 文件中的操作

    导出函数 setCurrentUserFirstName(currentUserFirstName){
            返回{
                    类型：'SET_CURRENT_USER_FIRST_NAME'，
                    有效载荷：currentUserFirstName
            };      
    }


    导出函数 setCurrentUserHandle(currentUserHandle){
            返回{
                    类型：'SET_CURRENT_USER_HANDLE'，
                    有效载荷：当前用户句柄
            };      
    }

并且在减速机中

    常量初始用户状态 = {
      用户：{}，
      当前用户名：[]，
      当前用户句柄：[]
    };

    // 用户减速器
    const userReducer = (state = initialUserState, action) => {

      //使用newState对象是不可变的
            让新状态 = 状态；

            开关（动作类型）{

              案例“SET_CURRENT_USER_FIRST_NAME”：
                    新状态 = {
                      ...状态，   
                      currentUserFirstName：action.payload
                };
                休息;

              案例“SET_CURRENT_USER_HANDLE”：
                    新状态 = {
                      ...状态，   
                      当前用户句柄：action.payload
                };
                休息;

                休息;

              默认：
            休息;
      }

      返回新状态；
    };

    导出默认 userReducer；

我有什么不正确的？

标签： reactjsreduxreact-redux

Answer 1

你有 2 个 return 语句mapDispatchToProps- 第二个永远不会到达。您可以返回单个对象，如下所示：

const mapDispatchToProps = (dispatch) => {
      return{
        setCurrentUserFirstName: (currentUserFirstName) =>{
          dispatch(  setCurrentUserFirstName(currentUserFirstName));
        },
        setCurrentUserHandle: (currentUserHandle) =>{
          dispatch(  setCurrentUserHandle(currentUserHandle));
        }
      }  
};