无法在 redux-form 中显示提交错误答案

【问题标题】：Cannot display submit errors in redux-form无法在 redux-form 中显示提交错误
【发布时间】：2017-03-28 14:26:03
【问题描述】：

我正在尝试在我的表单中显示提交错误，但我无法弄清楚为什么这不起作用。当我尝试提交有错误的表单时，我在控制台中收到了简单的错误，尽管启用了按钮并且我的表单中没有显示任何错误，但无法再次提交它。

未捕获（承诺）

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);

【问题讨论】：

您找到解决方案了吗？
我也希望看到解决方案。

标签： javascript reactjs error-handling redux redux-form

【解决方案1】：

乍一看，submit() 函数内部存在一些未捕获的错误（如日志所述...）。

这是因为 Redux-Form 只捕获 SubmissionError，而不是其他普通错误。

所以解决方案是自己处理错误（例如在拒绝实现或 catch 块中分派 submitFailed 操作）

例如：

function submit(values, dispatch) {
    return new Promise((resolve) => {
        dispatch(actionCreators.loginUser(values.email, values.password))
        .catch( err => {
            //reject(err)
            dispatch(someNewErrorAnouncingAction(err))
        })
    })
}

【讨论】：