在我 redux-form
我有麻烦显示错误回到表单,
这是我的表格:
import React, { Component } from "react";
import { connect } from "react-redux";
import {
registerUser,
signOutUser
} from "../../actions/redux-token-auth-config";
import { Field, reduxForm, SubmissionError } from "redux-form";
import { FormDiv, SubmitButton, Title, Working } from "./styles";
const renderField = ({ input, label, type, meta: { touched, error } }) =>
<div>
<label>
{label}
</label>
<div>
<input {...input} placeholder={label} type={type} />
{touched &&
error &&
<span>
{error}
</span>}
</div>
</div>;
const errorsFrom = response => response.response.data;
const signUp = (data, dispatch, props) => {
return dispatch(props.registerUser(data))
.then(response => dispatch(signOutUser(data)))
.catch(response => {
throw new SubmissionError(errorsFrom(response));
});
};
const SignUp = props => {
const { error, handleSubmit, pristine, submitting } = props;
return (
<FormDiv>
<Title>subscribe</Title>
<form onSubmit={handleSubmit(signUp)}>
<Field
name="email"
component={renderField}
type="text"
placeholder="Email"
label="Email"
/>
<Field
name="password"
component={renderField}
type="password"
placeholder="Password"
label="Password"
/>
<Field
name="passwordConfirmation"
component={renderField}
type="password"
placeholder="Confirm Password"
label="Confirm Password"
/>
{error &&
<strong>
{error}
</strong>}
<SubmitButton type="submit" disabled={pristine || submitting}>
Sign Up
</SubmitButton>
{submitting && <Working />}
</form>
</FormDiv>
);
};
const ReduxFormSignUp = reduxForm({
form: "signup"
})(SignUp);
const mapStateToProps = (state, props) => {
return {
error:
state.form.signup && state.form.signup.submitErrors
? state.form.signup.submitErrors.errors
: null
};
};
const mapDispatchToProps = dispatch => {
return {
registerUser
};
};
export default connect(mapStateToProps, mapDispatchToProps)(ReduxFormSignUp);
提交后,我在redux状态下出现了一些错误:
但由于某种原因,他们没有被传回道具 . 所以我的道具包含 handleSubmit, pristine, submitting
但没有 error
道具 . 无论我是否使用我的 mapStateToProps
更新
文档和库之间似乎存在不一致之处,我没有看到将错误传递给此处https://github.com/erikras/redux-form/blob/master/src/createField.js中的字段的引用,如下所述:https://redux-form.com/7.2.3/docs/api/field.md/#usage
同样在这里:https://redux-form.com/7.2.3/docs/api/reduxform.md/我看不到将错误道具传递给包装组件的引用 . 但我看到很多例子,我应该期待 reduxForm
传递 error
道具 .
有线索吗?
1 回答
每个字段错误都传递给字段,并将通用错误(
_
)传递给表单 . 我认为你的代码应该有效 . 领域是否触及?