我将Redux-Form和React-Redux用于我的注册表单,并且在客户端进行了一些验证,但是使用电子邮件的情况只能由服务器确定。因此,我正在分派动作SIGN_UP,该动作会将数据发布到服务器并等待响应。响应可以是用户个人资料等,也可以是错误,例如400(已接收电子邮件)。现在,我想在表单的电子邮件输入下显示此错误,但是传递给<Field component={} />
的方法没有第二次触发,因此无法将错误显示给用户。但是,这是第一次执行传递给Field的方法。
class RegisterForm extends Component {
onSubmit = (formValues) => {
// Dispatching action with redux action creator
this.props.onSubmit(formValues);
};
renderServerError = () => {
// For errors from server
return <div className="invalid-feedback">{this.props.auth.error}</div>;
};
renderError(touched, error) {
// For client-side validation
if (touched && error) {
return <div className="invalid-feedback">{error}</div>;
}
}
renderField = ({ input, label, type, meta: { touched, error } }) => {
// Does not Run after updating store with new state with response from server
// But, runs for the first time after rendering component
return (
<div className="form-group">
<label>{label}</label>
<div>
<input
{...input}
placeholder={label}
type={type}
className={className}
/>
{/* Here I want to show either client sie errors or server errors */}
{touched && error
? this.renderError(touched, error)
: this.renderServerError()}
</div>
</div>
);
};
render() {
// Runs after updating store with new state with response from server
return (
<form onSubmit={this.props.handleSubmit(this.onSubmit)}>
<Field
type="email"
name="email"
component={this.renderField}
label="Email"
/>
{/* Removed fields for readability */}
</form>
);
}
}
const validate = ({ email, username, password1, password2 }) => {
// Client side validation ...
};
const mapStateToProps = (state) => {
return {
auth: state.auth,
};
};
RegisterForm = connect(mapStateToProps)(RegisterForm);
export default reduxForm({
form: 'registerForm',
validate,
})(RegisterForm);
有解决方法吗?