未捕获的 TypeError：无法在 react 和 redux 中将类作为函数调用

Question

我使用reactjs和redux进行数据控制，组件的代码是

Employeeprofile.jsx：

import React from 'react';
import UserPersonalProfile from './UserPersonalProfile.jsx';
import ViewUserPersonal from './ViewUserPersonal.jsx';
import UserBankInformation from './UserBankInformation.jsx';
import UserContactDetails from './UserContactDetails.jsx';
import { Router, Link , Route, Switch ,browserHistory } from 'react-router';
import {personaldetails,employeedetails, personaldetails_response} from '../actions/index.jsx'
import {personaldetailreducer} from '../reducers/personaldetails.jsx'
import thunk from 'redux-thunk';
import ReduxPromise from 'redux-promise';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class EmployeeProfilePage extends React.Component{

    render()
        {
        return(
            <div>
                <div className="container">
                    <div className="row">
                        <div className="margin">
                            <div className="col-md-12">
                                <div className="main_content">
                                    <div className="row">
                                        <div className="col-md-12">
                                             <div className="row">
                                                 <div className="col-sm-12" data-spy="scroll" data-offset="0">
                                                    <UserPersonalProfile />
                                                 </div>
                                                 <div className="col-sm-6">
                                                    <ViewUserPersonal />
                                                 </div>
                                                 <div className="col-sm-6">
                                                    <UserContactDetails />
                                                 </div>
                                                 <div className="col-sm-6">
                                                    <UserBankInformation />
                                                 </div>
                                             </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}


export default  EmployeeProfilePage;

UserPersonalProfile.jsx：

import React from 'react';
import { Router, Link , Route, Switch ,browserHistory } from 'react-router';
import {employeedetails, employeedetails_response} from '../actions/employee_actions.jsx'
import {personaldetailreducer} from '../reducers/personaldetails.jsx'
import thunk from 'redux-thunk';
import ReduxPromise from 'redux-promise';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';


class UserPersonalProfile extends React.Component
{

    constructor(props) {
        super(props);
        this.state = {
            EmployeeProfile: []
        };
    }

    componentDidMount()
    {
            this.props.employeedetails();
            this.setState({EmployeeProfile:this.props.employeedetails()})
    }
    render(){
        return(
            <div className="panel panel-info">
                <div className="panel-heading">
                    <div className="row">
                        <div  className="col-lg-12 panel-title">
                            <strong>Your Personal Profile</strong><span className="pull-right"><Link to='/home' className="view-all-front btn btn-default">Go Back</Link></span>
                        </div>
                    </div>
                </div>
                <div className="col-lg-12 well-user-profile">
                    <div className="row">                            
                        <div className="col-lg-2 col-sm-3">
                            <div className="fileinput-new">
                                <img src="/static/users/app/images/profilepic.jpg" id="accountimg" />
                            </div>
                        </div>
                        <div className="col-lg-8 col-sm-8 ">
                            <div className="personalprofile">                                        
                                <h3></h3>
                                <hr />
                                <dl className="dl-horizontal">
                                    <dt id="detail1">Employee Code</dt>

                                    <dt id="detail2">Biometric ID</dt>

                                    <dt id="detail3">Department</dt>

                                    <dt id="detail4">Designation</dt>

                                    <dt id="detail5">Joining Date</dt>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state,props) {
    console.log(state,'state data')
    console.log(props,'props data')

  return {
    EmployeeProfile: state
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    employeedetails: UserPersonalProfile
  }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(UserPersonalProfile);

减速器：

personaldetails.jsx：

import { FETCH_USER_DATA ,
         FETCH_USER_SUCCESS,
         FETCH_USER_ERROR
       } from '../actions/constants'


const initialState =
    {
        "first_name": " ",
        "last_name": " ",
        "email": "",
        "profile": null,
        "fetching":false,
        "fetched" :false,
        "error":null
    }



// Takes care of changing the application state
function personaldetailreducer (state=initialState, action)

        {
            switch (action.type)
            {

                case "FETCH_USER_DATA":
                    return Object.assign({}, state, action.payload);

                case "FETCH_USER_DATA_ERROR":
                    return {state,fetching:false,error:action.payload};

            }

            return state
        }

export default personaldetailreducer

动作：

employee_actions.jsx：

import {
    LOGIN_FORM,
    LOGIN_API,
    USER_PERSONAL_DETAILS_API,
    EMPLOYEE_DETAILS_API,
    FETCH_USER_DATA,
    FETCH_EMPLOYEE_DATA,
    FETCH_EMPLOYEE_DATA_SUCCESS,
    FETCH_EMPLOYEE_DATA_ERROR,
    FETCH_USER_SUCCESS,
    FETCH_USER_ERROR

} from './constants';
import axios from 'axios';
import { Link ,browserHistory} from 'react-router';
import ReduxPromise from 'redux-promise';
import configureStore from '../store/store.jsx'

/* Using EMPLOYEE_DETAILS_API,user is authenticated using token and corresponsing user profile details is
 displayed in front end */

    export  function employeedetails() {
        var hash_token ='Token '+ localStorage.getItem('usertoken');

        return dispatch => {
            axios.get(EMPLOYEE_DETAILS_API,
                    {headers:{'Authorization': hash_token,
                         'Content-Type' : "application/json"
                    }})
                .then(res => {
                    console.log(res,'responseeeeeeeeeeeeee')
                    var profile_response = res;
                    dispatch(employeedetails_response(profile_response));
                            });

                        };
                    }

/* Using EMPLOYEE_DETAILS_API ,user is authenticated using token and corresponsing user profile details is
 displayed in front end */

    export const employeedetails_response = (response) =>
    ({
            type:FETCH_EMPLOYEE_DATA ,
            payload: response
    })

在这里，问题是当我调用组件 onload 时，我得到“无法调用类函数”。当我在另一个组件中调用上述组件时，问题来了。

“EmployeeProfilePage.jsx”内部使用了组件“UserPersonalProfile.jsx”，并使用了它的reducer 和action。

感谢任何帮助。

提前致谢。

Answer 1

解决方法很简单，

在您的mapDispatchToProps 函数中，您错误地调用了bindActionCreators，您不需要将其绑定到组件，而是将操作绑定为

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    employeedetails: employeedetails
  }, dispatch);
}

Answer 2

我认为问题出在这里：

  return bindActionCreators({
    employeedetails: UserPersonalProfile
  }, dispatch);

bindActionCreators签名是bindActionCreators(actionCreators, dispatch)

actionCreators（函数或对象）：动作创建者或对象 他们的价值观是行动创造者。

将employeedetails 的值更改为您的动作创建者employeedetails(employee_actions.jsx) 而不是您的Component。

  return bindActionCreators({
    employeedetails: employeedetails
  }, dispatch);