javascript - Redux-forms - Errors 属性未定义

Question

我在我的应用程序中使用“redux-forms”，并将验证函数传递给表单容器组件以进行同步验证。当我在其中一个字段中输入不正确的值时，我会显示内联错误消息(在该字段下)，但是，error prop 仍然是 undefined容器组件到表单 react 组件。

表单代码:

const LoginFormComponent = props => {
  return (
    <div className="formContainer">
      <form>
        <Field name="email" label="Email" type="text" placeholder="email" component={InputComponent} />
        <Field name="password" label="Password" type="password" placeholder="password" component={InputComponent} />
        <button className="btn" type="submit">
          Submit
        </button>
      </form>
    </div>
  );
};

const LoginForm = reduxForm({
  form: 'loginForm',
  validate: validateLoginForm
})(LoginFormComponent);

export default LoginForm;

发送到上述 React 组件的更新 props 是:

anyTouched: true
array: Object { insert: bindActionCreator/<(), move: bindActionCreator/<(), pop: bindActionCreator/<(), … }
asyncValidate: function Form/_this.asyncValidate()
asyncValidating: false
autofill: function bindActionCreator/<()
blur: function bindActionCreator/<()
change: function bindActionCreator/<()
clearAsyncError: function bindActionCreator/<()
clearFields: function bindActionCreator/<()
clearSubmit: function bindActionCreator/<()
clearSubmitErrors: function bindActionCreator/<()
destroy: function bindActionCreator/<()
dirty: true
dispatch: function dispatch()
error: undefined // <===== this is the value I am looking to get
form: "loginForm"
handleSubmit: function Form/_this.submit()
initialValues: undefined
initialize: function bindActionCreator/<()
initialized: false
invalid: true
pristine: false
pure: true
reset: function bindActionCreator/<()
submit: function bindActionCreator/<()
submitFailed: false
submitSucceeded: false
submitting: false
touch: function bindActionCreator/<()
triggerSubmit: undefined
untouch: function bindActionCreator/<()
valid: false
validate: function createValidator/<()
warning: undefined
__proto__: Object { … }

注意 error 键的值为 undefined

根据请求，验证函数是:

const validateLoginForm = createValidator({
  email: [checkEmail, checkRequired],
  password: [checkRequired]
});

export function createValidator(rules, params) {
  return (data = {}) => {
    const errors = {};
    Object.keys(rules).forEach(key => {
      const rule = join([].concat(rules[key])); // concat enables both functions and arrays of functions
      const error = rule(data[key], data, { key, ...params });
      if (error) {
        errors[key] = error;
      }
    });
    return errors;
  };
}

const join = rules => (value, data, params) => rules.map(rule => rule(value, data, params)).filter(error => !!error)[0];

我做错了什么。只是为了澄清验证函数正在返回一个错误对象。

Answer 1

我也得到了相同的 Prop 。但是我在同步错误中得到了错误对象。