我在我的应用程序中使用’redux-forms’并将验证函数传递给表单容器组件以进行同步验证.当我在其中一个字段中输入不正确的值时,我会在内部显示错误消息(在字段下),但是,错误支持仍未定义为容器组件传递给表单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组件的更新道具是：

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 { … }

请注意,错误键的值为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函数返回一个错误对象.

最佳答案 我也得到了相同的props.But我得到同步错误中的错误对象.