![动作创建者]( "动作创建者")
本文介绍了动作创建者未显示在“this.props"中使用 redux-form 6.0.0-rc.3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我使用 redux-form 5.3.1 时，我能够访问我的动作创建者.但是因为我需要 Material-UI，所以我将其更新为 6.0.0-rc.3.
从 5.3.1 到 6.0.0 的变化:
const { handleSubmit, fields: { email, password, passwordConfirm }} = this.props;
{email.touched &&email.error &&<div className="error">{email.error}</div>}
导出默认 reduxForm({形式:'注册'，字段:['email', 'password', 'passwordConfirm'],证实}, mapStateToProps, actions)(Signup);
import { renderTextField, renderCheckbox, renderSelectField, renderDatePicker } from '../material-ui-wrapper';
代码:
1 - console.log(this.props) 不记录动作创建者 - 应该记录 signupUser 函数
'use strict';import React, { Component } from 'react';import { reduxForm, Field } from 'redux-form';从'../../actions'导入*作为动作；import { renderTextField } from '../material-ui-wrapper';从'material-ui/Card'导入{Card, CardActions, CardHeader, CardText};从'material-ui/FlatButton'导入FlatButton；类注册扩展组件{handleFormSubmit(formProps) {console.log(this.props);this.props.signupUser(formProps);}渲染警报(){如果(this.props.errorMessage){返回 (<div className="错误">{this.props.errorMessage}
);}}使成为() {const { handleSubmit, 原始, 提交 } = this.props;返回 (<form id="form" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}><卡片><CardHeader title="Cadastre-se"/><卡片文本><Field name="email" component={renderTextField} label={"Email"} fieldType="text"/><Field name="password" component={renderTextField} label={"Senha"} fieldType="password"/><Field name="passwordConfirm" component={renderTextField} label={"Confirmação de senha"} fieldType="password"/>{this.renderAlert()}</CardText><卡片操作><FlatButton type="submit" label="Criar!"/></CardActions></卡片></表单>);}}功能验证(formProps){常量错误 = {};if (!formProps.email || !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[AZ]{2,4}$/i.test(formProps.email)) {errors.email = 'Por 赞成，通知 um email válido';}if (formProps.password !== formProps.passwordConfirm) {errors.password = 'Senhas devem ser iguais.';}如果(！formProps.password){errors.password = 'Por 青睐，通知 uma senha.';}如果(！formProps.passwordConfirm){errors.passwordConfirm = 'Por 赞成，确认一个 sua senha.';}返回错误；}函数 mapStateToProps(state) {返回 { errorMessage: state.auth.error };}导出默认 reduxForm({形式:'注册'，证实}, mapStateToProps, actions)(注册);
编辑
改变:
导出默认 reduxForm({形式:'注册'，证实}, mapStateToProps, actions)(Signup);
致:
注册 = reduxForm({形式:'注册'，证实})(注册);export default Signup = connect(mapStateToProps, actions)(Signup);
它有效.这是解决此问题的最正确方法吗?
解决方案
代替:
导出默认 reduxForm({形式:'注册'，证实}, mapStateToProps, actions)(注册);
使用:
Signup = reduxForm({形式:'注册'，验证})(注册);export default Signup = connect(mapStateToProps, actions)(Signup);
PS:可能是一种解决方法
When I used redux-form 5.3.1 I was able to access my action creators. But as I needed Material-UI, I updated it to 6.0.0-rc.3.
Changes from 5.3.1 to 6.0.0:
- Removed fields from render():
const { handleSubmit, fields: { email, password, passwordConfirm }} = this.props;
- Removed errors validation from under inputs:
{email.touched && email.error && <div className="error">{email.error}</div>}
- Removed fields array from export default:
export default reduxForm({ form: 'signup', fields: ['email', 'password', 'passwordConfirm'], validate}, mapStateToProps, actions)(Signup);
- Added wrappers for Material-UI components:
import { renderTextField, renderCheckbox, renderSelectField, renderDatePicker } from '../material-ui-wrapper';
Code:
1 - console.log(this.props) logs no action creator - should log signupUser function
'use strict';
import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import * as actions from '../../actions';
import { renderTextField } from '../material-ui-wrapper';
import {Card, CardActions, CardHeader, CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
class Signup extends Component {
handleFormSubmit(formProps) {
console.log(this.props);
this.props.signupUser(formProps);
}
renderAlert() {
if (this.props.errorMessage) {
return (
<div className="error">
{this.props.errorMessage}
</div>
);
}
}
render() {
const { handleSubmit, pristine, submitting } = this.props;
return (
<form id="form" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<Card>
<CardHeader title="Cadastre-se"/>
<CardText>
<Field name="email" component={renderTextField} label={"Email"} fieldType="text"/>
<Field name="password" component={renderTextField} label={"Senha"} fieldType="password"/>
<Field name="passwordConfirm" component={renderTextField} label={"Confirmação de senha"} fieldType="password"/>
{this.renderAlert()}
</CardText>
<CardActions>
<FlatButton type="submit" label="Criar!"/>
</CardActions>
</Card>
</form>
);
}
}
function validate(formProps) {
const errors = {};
if (!formProps.email || !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(formProps.email)) {
errors.email = 'Por favor, informe um email válido';
}
if (formProps.password !== formProps.passwordConfirm) {
errors.password = 'Senhas devem ser iguais.';
}
if (!formProps.password) {
errors.password = 'Por favor, informe uma senha.';
}
if (!formProps.passwordConfirm) {
errors.passwordConfirm = 'Por favor, confirme a sua senha.';
}
return errors;
}
function mapStateToProps(state) {
return { errorMessage: state.auth.error };
}
export default reduxForm({
form: 'signup',
validate
}, mapStateToProps, actions)(Signup);
EDIT
Changed:
export default reduxForm({ form: 'signup', validate }, mapStateToProps, actions)(Signup);
To:
Signup = reduxForm({ form: 'signup', validate})(Signup);export default Signup = connect(mapStateToProps, actions)(Signup);
It worked. Is it the most correct way to fix this?
解决方案
Instead of:
export default reduxForm({
form: 'signup',
validate
}, mapStateToProps, actions)(Signup);
Use:
Signup = reduxForm({
form: 'signup',
validate})(Signup);
export default Signup = connect(mapStateToProps, actions)(Signup);
PS: Might be a work around
这篇关于动作创建者未显示在“this.props"中使用 redux-form 6.0.0-rc.3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！