mapDispatchToProps函数不起作用React Redux

Question

有带有Login组件的react-redux。我试图通过mapDispatchToProps将子程序与组件的props链接起来，但是出现了错误：

×
TypeError: this.props.login is not a function

这是代码：

import React from 'react'
import {connect} from 'react-redux'
import * as userActions  from '../actions/UserActions'

export class Login extends React.Component{
    constructor(props) {
        super(props)
        this.login = this.login.bind(this)
    }

    login () {
        console.log(this)
        this.props.login(this.username,this.password)
    }

    render(){
        return <div>
            <div class="login-box">
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Имя пользователя</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Username" ref = {(input)=>{this.username = input}} />
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Пароль</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ref = {(input)=>{this.password = input}} />
                    </div>
                    <button class="btn btn-primary" onClick= {this.login} >Войти </button>
                </form>
                </div>
        </div>
    }
}

const mapDispatchToProps = dispatch => {
    return {
        login:(username,password) => {
            dispatch(userActions.login(username,password))
        }
    }
}

export default connect(null,mapDispatchToProps)(Login)

PS： 我正在使用react-redux-router，如果有帮助