我正在尝试在表单中显示提交错误,但我无法弄清楚为什么这不起作用。当我尝试提交有错误的表单时,我在控制台中只收到简单的错误,并且无法再次提交,尽管按钮已启用并且我的表单中没有显示错误。
Uncaught (in promise)
const validate = values => {
const errors = {}
const requiredFields = [ 'email', 'password' ]
requiredFields.forEach(field => {
if (!values[ field ]) {
errors[ field ] = 'Pole wymagane'
}
})
if (values.email && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Podany adres jest nieprawidłowy'
}
return errors
}
function submit(values, dispatch) {
return new Promise((resolve, reject) => {
dispatch(actionCreators.loginUser(values.email, values.password))
.catch( err => {
reject(err)
})
})
}
class LoginForm extends Component {
constructor(props) {
super(props);
//this.onSubmit = this.onSubmit.bind(this);
}
render() {
const { error, handleSubmit, pristine, reset, submitting } = this.props
return (
<form onSubmit={handleSubmit(submit)}>
<div>
<Field name="email"
component={renderTextField}
label="Email"/>
</div>
<div>
<Field name="password"
component={renderTextField}
type="password"
label="Hasło">
{error && <strong>{error}</strong>}
</Field>
</div>
<br/>
<div>
<RaisedButton label="Zaloguj"
primary={true}
type="submit"
disabled={pristine || submitting} />
<RaisedButton type="button"
disabled={pristine || submitting}
onClick={reset}>Reset
</RaisedButton>
</div>
<br />
</form>
)
}
}
reactMixin(LoginForm.prototype, LinkedStateMixin);
const mapStateToProps = (state) => {
return {
user: state.user.user,
isAuthenticated: state.user.isAuthenticated
}
}
// const mapDispatchToProps = (dispatch) => {
// return {
// actions: bindActionCreators(actionCreators, dispatch)
// }
// }
const form = reduxForm({
form: 'LoginForm',
validate,
onSubmit: submit
})(LoginForm);
export default connect(mapStateToProps )(form);
最佳答案
乍一看,submit()
函数内部存在一些 Uncaught Error (如日志所示...)。
这是因为 Redux-Form 只捕获 SubmissionError ,但不是其他简单的错误。
因此,解决方案是自己处理错误(例如在拒绝实现或 catch block 内调度submissionFailed 操作)
例如:
function submit(values, dispatch) {
return new Promise((resolve) => {
dispatch(actionCreators.loginUser(values.email, values.password))
.catch( err => {
//reject(err)
dispatch(someNewErrorAnouncingAction(err))
})
})
}
关于javascript - 无法以 redux-form 形式显示提交错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40597403/