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

Question

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

setCurrentUserFirstName - 有效 setCurrentUserHandle - 没有

    import React, { Component } from 'react';
    从“反应路由器”导入{链接}；
    从'react-redux'导入{连接}；
    从“../../store”导入商店；
    var Utilities = require('../../../common/commonutilities.js');
    var RestClient = require('../../../common/restClient.js');

    //动作
    import { setCurrentUserHandle, setCurrentUserFirstName } from '../../actions/userActions';

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

        this.state = {};

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

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

            //工作正常
            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}

          

        );
      }

    }

    const mapStateToProps = 函数（商店）{
      返回 {

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

    const mapDispatchToProps = (调度) => {

          返回{
            setCurrentUserFirstName: (currentUserFirstName) =>{
              dispatch(setCurrentUserFirstName(currentUserFirstName));
            }
          }

          返回{
            setCurrentUserHandle: (currentUserHandle) =>{
              dispatch(setCurrentUserHandle(currentUserHandle));
            }
          }     

    };


    //连接所有
    导出默认连接(mapStateToProps, mapDispatchToProps)(Header);

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

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


    导出函数 setCurrentUserHandle(currentUserHandle){
            返回{
                    类型：'SET_CURRENT_USER_HANDLE'，
                    有效负载：currentUserHandle
            };      
    }

并且在减速机中

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

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

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

            开关（动作。类型）{

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

              案例“SET_CURRENT_USER_HANDLE”：
                    新状态 = {
                      ...状态，   
                      currentUserHandle: action.payload
                };
                休息;

                休息;

              默认：
            休息;
      }

      返回新状态；
    };

    导出默认的 userReducer；

我有什么不正确的？

Answer 1

您的程序中有 2 个 return 语句mapDispatchToProps- 第二个语句永远不会到达。您可以按如下方式返回单个对象：

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