Redux-将调度Map到属性-类型错误:_this. props. setCurrentUserHandle不是函数

voase2hg  于 2022-11-24  发布在  其他
关注(0)|答案(2)|浏览(98)

我试图让一个简单的react-redux应用程序工作,我遇到了一个奇怪的错误,我不能弄清楚。我试图简单地设置我的当前用户的名字和处理商店和一个设置功能的工作,另一个不工作。
设置当前用户名字-工作设置当前用户句柄-不工作

import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import store from '../../store';
var Utilities = require('../../../common/commonutilities.js');
var RestClient = require('../../../common/restClient.js');

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

class Header extends Component {
  constructor(props) {
    super(props);

    this.state = {};

    RestClient.api.fetchGet('/getcurrentuser', (response) => {
      if(response.success) {
        this.setState({
          isAuthenticated: true,
          currentUser: response.currentUser
        });

        store.dispatch({
          type: 'USER_DID_LOGIN',
          userLoggedIn: true
        });

        //works fine
        this.props.setCurrentUserFirstName(response.currentUser.firstName);      

        //doesn't work and throws the error: "TypeError: _this.props.setCurrentUserHandle is not a function"
        this.props.setCurrentUserHandle(response.currentUser.handle);

      }
    },
    (err) => {
      console.log(err);
    });
  }

  render() {
    return (
      

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

      

    );
  }

}

const mapStateToProps = function(store) {
  return {

         //user properties
         user: store.userState
  };
};

const mapDispatchToProps = (dispatch) => {

      return{
        setCurrentUserFirstName: (currentUserFirstName) =>{
          dispatch(  setCurrentUserFirstName(currentUserFirstName));
        }
      }

      return{
        setCurrentUserHandle: (currentUserHandle) =>{
          dispatch(  setCurrentUserHandle(currentUserHandle));
        }
      }     

};

//connect it all
export default connect(mapStateToProps, mapDispatchToProps)(Header);

我将它们作为操作保存在userActions.js文件中

export function  setCurrentUserFirstName(currentUserFirstName){
    return{
            type:  'SET_CURRENT_USER_FIRST_NAME',
            payload: currentUserFirstName
    };      
}

export function  setCurrentUserHandle(currentUserHandle){
    return{
            type: 'SET_CURRENT_USER_HANDLE',
            payload: currentUserHandle
    };      
}

并在减速机

const initialUserState = {
  user: {}, 
  currentUserFirstName:[],
  currentUserHandle:[]
};

// The User reducer
const userReducer = (state = initialUserState, action) => {

  //using newState object to be immutable
        let newState = state;

        switch (action.type) {

          case 'SET_CURRENT_USER_FIRST_NAME':
                newState = {
                  ...state,   
                  currentUserFirstName:  action.payload 
            };
            break;

          case 'SET_CURRENT_USER_HANDLE':
                newState = {
                  ...state,   
                  currentUserHandle:  action.payload
            };
            break;

            break;

          default:
        break;
  }

  return newState;
};

export default userReducer;

我有什么不对的?

ep6jt1vc

ep6jt1vc1#

mapDispatchToProps中有两个return语句,第二个语句永远不会到达。可以返回一个对象,如下所示:

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

ax6ht2ek2#

除了Tony的正确答案之外,我强烈建议您使用mapDispatch的“对象速记”形式。您可以将一个充满操作创建者的对象作为connect()的第二个参数传递给connect(),而不是实际的mapDispatch函数。在您的情况下,它看起来像这样:

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

const actionCreators =  { setCurrentUserHandle, setCurrentUserFirstName };

class Header extends Component {}

export default connect(mapStateToProps, actionCreators)(Header);

相关问题