为何输入正确账号密码登录时出现TypeError: this.props.login is not a function错误？

兄弟，你遇到的这个问题根源非常清晰——你虽然在Login组件里导入了login action，但没通过connect把它映射到组件的props中，导致组件调用this.props.login时找不到这个函数。

下面给你两种简单的修复方式，任选其一就行：

方法1：简洁的对象式映射（推荐） #

直接把login action作为对象传给connect的第二个参数，Redux会自动帮你把它绑定到dispatch上并注入组件props：

// 替换你原来的export default行
export default connect(mapStateToProps, { login })(Login);

方法2：显式定义mapDispatchToProps #

如果你想更清晰地看到映射过程，可以手动定义mapDispatchToProps函数：

const mapDispatchToProps = dispatch => ({
  // 把login action包装成props里的函数，调用时自动dispatch
  login: (username, password) => dispatch(login(username, password))
});

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

修复之后，this.props.login就会变成一个可用的函数，你的登录提交逻辑就能正常执行了。

内容的提问来源于stack exchange，提问作者Saifur Rehman