Redux Forms提交验证不会设置错误消息
我正在尝试使用提交验证进行表单。 当我提交表单时，我的handleSubmit触发并抛出SubmissionError ，但没有再发生任何事情。
提交（每次只发生错误）：
function submit(values)
{
console.log(values);
throw new SubmissionError({ password: 'Wrong password', _error: 'Login failed!' });
}
从示例渲染字段：
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>
)
我的表单：
class LoginForm extends Component {
render()
{
const { error, handleSubmit, pristine, reset, submitting } = this.props
console.log(error);
return (
<div>
<form onSubmit={handleSubmit}>
<h1>Login</h1>
<Field name="email" type="text" component={renderField} label="Username"/>
<Field name="password" type="text" component={renderField} label="Username"/>
{error && <strong>{error}</strong>}
<button type = "submit">Login</button>
</form>
</div>
)
}
}
LoginForm = reduxForm({
form: 'login',
onSubmit: submit
})(LoginForm);
export default LoginForm;
当我按下Submit ，提交调用函数时，抛出异常，但没有在形式上发生了其他和错误消息，并且renderField未显示。
您需要将验证方法添加到reduxForm构造函数，如下所示：
function validateInput(input) {
let errors = {}
if (!data.email) {
errors.email = "Email is required."
}
if (!data.password) {
errors.password = "Password is required."
}
return errors
}
const loginForm = reduxForm({
form: 'login',
onSubmit: submit,
validate: validateInput
})
如果输入字段无效，这将导致redux-form在输入字段下显示错误。
当然，你需要连接你的组件和react-redux connect，这样工作就像这样：
export default connect(mapStateToProps)(loginForm(LoginForm))
用于从onSubmit返回提交验证错误的可抛出错误。 目的是区分承诺拒绝，因为由于AJAX I / O问题或其他服务器错误导致的验证错误拒绝承诺。 文档
所以， SubmissionError的目的不是直接抛出错误。 当你正在做一些像API请求那样的promise时使用它
return axios
.post('/sessions/login', values)
.then((res) => {
// do something with response
})
.catch((err) => {
throw new SubmissionError(err.response.data);
});
上一篇: Redux Forms submit validation does not set errors messages