Redux-forms - 错误道具未定义

Question

我在我的应用中使用'redux-forms'，并将验证函数传递给表单容器组件以进行同步验证。当我在其中一个字段中输入不正确的值时，我会显示内联错误消息（在字段下），但是error道具仍然是undefined，因为容器组件传递给表单反应成分。

表单代码：

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组件的更新道具是：

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

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

Answer 1

我也得到相同的props.But我得到同步错误中的错误对象。