React.js TypeError:Object(...)不是this.props.dispatch中的函数

时间:2020-07-19 09:39:49

标签: reactjs authentication redux react-redux mern

image of error I'm getting

我正在我的React应用程序中创建登录,注册功能。 使用this.props.dispatch时,我总是得到this.props.dispatch is not a function error 否则,我得到的Object(..)不是函数。

请帮助!

这是用于注册用户文件名Register.js

的功能
submitForm = event => {
    event.preventDefault();

    let dataToSubmit = {
        email: this.state.email,
        password: this.state.password,
        passwordConfirmation: this.state.passwordConfirmation,
        name: this.state.name,
        lastname: this.state.lastname
    };

    if (this.isFormvalid(this.state)) {
        this.setState({ errors: [] })
        this.props.dispatch(registerUser(dataToSubmit))
            .then(response => {
                alert('reg suucefully')
                this.props.history.push('/login2')

            }
            )
            .catch(err => {
                alert("Sorry! product failed to upload")
                console.log(err)
                this.setState({
                    errors: this.state.errors.concat(err)
                });
            })
    }
    else {
        console.error('form not valid')
    }
}


// in render i made a button like this

<button className='btn waves-effect red lighten-2'
    type='submit'
    name='action'
    onClick={this.submitForm}
>
    Create an account
</button>

registerUser获得了user_actions.js

import {
    LOGIN_USER,
    REGISTER_USER,
    AUTH_USER,
    LOGOUT_USER,
} from '../constants/user_constants';

const registerUser = (dataToSubmit) => {
    const request = axios.post(`http://localhost:8000/api/users/register`, dataToSubmit)
        .then(response => response.data);

    return {
        type: REGISTER_USER,
        payload: request
    }
}

export default { loginUser, registerUser};

这是用户减少量

import {
    LOGIN_USER,
    REGISTER_USER,
    AUTH_USER,
    LOGOUT_USER,
} from '../constants/user_constants';


function userReducer(state = {}, action) {
    switch (action.type) {
        case REGISTER_USER:
            return { ...state, register: action.payload }
        case LOGIN_USER:
            return { ...state, loginSucces: action.payload }
        case AUTH_USER:
            return { ...state, userData: action.payload }
        
        default:
            return state;
    }
}

export default userReducer;

0 个答案:

没有答案