这个 Redux 表单中的 MapStateToProps 的目标是检查用户是否在数据库中并将 validuser
状态传回提交的表单,以便我可以呈现错误消息,或将用户重定向到主页。问题是当我尝试将 MapStateToProps 连接到表单时,它会抛出错误。
Redux 形式:
import React, { Component } from "react";
import { connect } from 'react-redux';
import { reduxForm, Field, Form, reset } from "redux-form";
import { Link } from 'react-router-dom';
import { checkUser } from "../actions/index";
class SignIn extends Component {
constructor(props) {
super(props)
this.state = {
user: {
validUser: {
username: null,
validUser: null
}
}
}
}
onSubmit = (props) => {
this.props.dispatch(checkUser(props));
}
render() {
const { handleSubmit, reset } = this.props;
return(
<div>
<form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }>
<h3>Sign In!</h3>
<div>
<label><h3>Username</h3></label>
<div>
<Field name="username" component="input" type="text" />
</div>
</div>
<div>
<label><h3>Password</h3></label>
<div>
<Field name="password" component="input" type="password" />
</div>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
<button><Link to="/me" className="btn btn-danger">Cancel</Link></button>
</form>
</div>
)
}
};
function mapStateToProps(state) {
return {
user: state.user.validUser
};
};
let signInForm = reduxForm(
{ form: "signInForm" })(SignIn);
export default signInForm = connect(mapStateToProps, null)(SignIn);
但是我得到以下错误:
Uncaught TypeError: handleSubmit is not a function
at SignIn.render (signin.js:33)
at ReactCompositeComponent.js:796
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
at Object.mountComponent (ReactReconciler.js:46)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
任何人都可以建议调试这个问题吗?
最佳答案
首先,mapStateToProps 不是 redux 形式独有的东西,它来自 redux/react-redux。
您的代码的问题是您将 SignIn 组件传递给连接函数,而不是您刚刚创建的 redux-form 的 HOC 组件。
let signInForm = reduxForm(
{ form: "signInForm" })(SignIn);
export default signInForm = connect(mapStateToProps, null)(SignIn);
SignIn
不是 redux 形式的组件,因此它不会有 handleSubmit
功能。
你要的是这个:
export default connect(mapStateToProps, null)(signInForm);
关于javascript - Redux 表单 : MapStateToProps is breaking form,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43174833/