javascript - TypeError: Object(...) is not a function in React when dispatch a login function

Question

我正在学习一个教程，但我遇到了这个我似乎无法弄清楚的错误。我正在尝试将参数分派给 AuthActions.js 中的登录函数，但我不断收到错误TypeError: Object(...) is not a function当我提交时。我的代码如下

这是 AuthActions.js 中的代码

    export const login = (email, pass) => {
            return {
                type: 'LOGIN',
                payload: {email, pass}
            }
        }

然后这是登录组件中的代码

import React, {Component} from 'react'
import {connect} from "react-redux";
import Field from "../Field";
import {login} from "../../store/actions/AuthActions";

const fields = [
    {label: 'Username/Email', placeholder: 'Enter Your Username/Email', elementName: 'input', type: 'email', name: 'email', id: 'user'},
    {label: 'Password', placeholder: 'Enter Your Password', elementName: 'input', type: 'password', name: 'password', id: 'password'}
]

class Login extends Component{
    render(){
        return(
            <div className='col-lg-8 mx-auto'>
                <form onSubmit={e => {
                    e.preventDefault();
                    this.props.login(this.props.values.email, this.props.values.password);
                }}>
                    {fields.map((field, fieldIndex) => {
                        return(
                            <Field
                                {...field}
                                key={fieldIndex}
                                value={this.props.values[field.name]}
                                name={field.name}
                                onChange={this.props.handleChange}
                                onBlur = {this.props.handleBlur}
                                touched = {(this.props.touched[field.name])}
                                errors = {(this.props.errors[field.name])}
                            />
                        )
                    })
                    }
                    <br/>
                    <div id='success'/>
                    <div className='form-group'>
                        <button className='btn btn-primary btn-l'>Login</button>
                    </div>
                </form>
            </div>

        )
    }
}

const mapStateToProps = state => {
    return {
        auth: state.auth
    }
}

const mapDispatchToProps = dispatch => {
    return {
        //this is where the error point to
        login: (email, pass) => dispatch(login(email, pass))
    }
}

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

它抛出这个错误

Uncaught TypeError: Object(...) is not a function
    login Login.js:71
    onSubmit Login.js:30
    React 17
    unstable_runWithPriority scheduler.development.js:653
    React 4

关于这个功能

login: (email, pass) => dispatch(login(email, pass))

这也是减速机

const defaultState = {
    user: {},
    token: null
}

const auth = (state = defaultState, action) => {
    switch(action.type){
        case 'LOGIN':
            return{
                ...state,
                user: action.payload,
                token: 1
            }
        default:
            return state
    }
}
export default auth

标签： javascript

Answer 1

下面的代码正在工作。（我完全使用了你的减速器和动作）

class Login extends Component{
    render(){
        return(
            <div className='col-lg-8 mx-auto'>
            <label>{ this.props.auth?.user.email }</label>
            <button onClick={e => {
                e.preventDefault();
                this.props.login('email', 'password');
            }}>CLICK</button>
            </div>

        )
    }
}

const mapStateToProps = state => {
    return {
        auth: state
    }
}

const mapDispatchToProps = dispatch => {
    return {
        //this is where the error point to
        login: (email, pass) => dispatch(login(email, pass))
    }
}

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

如果您通过组合减速器来完成它：例如

减速器/index.js

import { combineReducers } from 'redux';
import authed from './authed';

export default combineReducers({
  authed,
})

你应该改变你mapStateToProps的如下：

const mapStateToProps = state => {
    return {
        auth: state.authed
    }
}