reduxForm 似乎没有将状态映射到道具
reduxForm doesn't seem to be mapping state to props
我刚从 redux-form:5.3.2
升级到 6.0.5
。我修改了我的登录表格,它看起来像这样:
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import * as actions from '../actions/authActions';
class SignIn extends Component {
handleFormSubmit({ email, password }) {
console.log(this.props);
this.props.signinUser({ email, password }, this.props.location);
}
renderAlert() {
if (this.props.errorMessage) {
return (
<div className="alert alert-danger">
{this.props.errorMessage}
</div>
);
} else if (this.props.location.query.error) {
return (
<div className="alert alert-danger">
Authorization required!
</div>
);
}
}
render() {
const { message, handleSubmit } = this.props;
const renderField = ({input, label, type, meta: { touched, error } }) => (
<fieldset className="form-group">
<label>{label}</label>
<input {...input} className="form-control" />
</fieldset>
)
return (
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
{this.renderAlert()}
<Field name="username" type="text" component={renderField} label="Username"/>
<Field name="password" type="password" component={renderField} label="Password"/>
<button action="submit" className="btn btn-primary">Sign In</button>
</form>
);
}
}
function mapStateToProps(state) {
return { errorMessage: state.auth.error }
}
export default reduxForm({
form: 'signin',
fields: ['email', 'password']
}, mapStateToProps, actions)(SignIn)
升级之前,我没有使用 Field
组件,但其他大部分内容都是一样的,我的操作 this.props.signinUser
被调用了。但是,现在 this.props
中不存在它。降级到 5.3.2
继续工作。我还没有通过逐步升级的过程来找出它坏了的地方,如果它坏了并假设我没有做错什么。
有什么建议吗?
而且...我刚刚找到了答案。我不得不改变这个:
export default reduxForm({
form: 'signin',
fields: ['email', 'password']
}, mapStateToProps, actions)(SignIn)
对此:
SignIn = reduxForm({
form: 'signin',
fields: ['email', 'password']
})(SignIn);
export default connect(mapStateToProps, actions)(SignIn);
这似乎不在文档中,但它应该在文档中。
我刚从 redux-form:5.3.2
升级到 6.0.5
。我修改了我的登录表格,它看起来像这样:
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import * as actions from '../actions/authActions';
class SignIn extends Component {
handleFormSubmit({ email, password }) {
console.log(this.props);
this.props.signinUser({ email, password }, this.props.location);
}
renderAlert() {
if (this.props.errorMessage) {
return (
<div className="alert alert-danger">
{this.props.errorMessage}
</div>
);
} else if (this.props.location.query.error) {
return (
<div className="alert alert-danger">
Authorization required!
</div>
);
}
}
render() {
const { message, handleSubmit } = this.props;
const renderField = ({input, label, type, meta: { touched, error } }) => (
<fieldset className="form-group">
<label>{label}</label>
<input {...input} className="form-control" />
</fieldset>
)
return (
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
{this.renderAlert()}
<Field name="username" type="text" component={renderField} label="Username"/>
<Field name="password" type="password" component={renderField} label="Password"/>
<button action="submit" className="btn btn-primary">Sign In</button>
</form>
);
}
}
function mapStateToProps(state) {
return { errorMessage: state.auth.error }
}
export default reduxForm({
form: 'signin',
fields: ['email', 'password']
}, mapStateToProps, actions)(SignIn)
升级之前,我没有使用 Field
组件,但其他大部分内容都是一样的,我的操作 this.props.signinUser
被调用了。但是,现在 this.props
中不存在它。降级到 5.3.2
继续工作。我还没有通过逐步升级的过程来找出它坏了的地方,如果它坏了并假设我没有做错什么。
有什么建议吗?
而且...我刚刚找到了答案。我不得不改变这个:
export default reduxForm({
form: 'signin',
fields: ['email', 'password']
}, mapStateToProps, actions)(SignIn)
对此:
SignIn = reduxForm({
form: 'signin',
fields: ['email', 'password']
})(SignIn);
export default connect(mapStateToProps, actions)(SignIn);
这似乎不在文档中,但它应该在文档中。