显示嵌入式组件的 Redux-Form 验证错误

Question

我在另一个组件中嵌入了一个 React 组件，我在父级上应用了验证：

const EmailAddressInput = (props) => {
  const { emailList, onKeyUp } = props;
  return (
      <div>
        <textarea
          {...emailList}
        />
      </div>
  );
};

它被放置在另一个组件中，例如：

let Emailer = (props) => {
  const { fields: { passType, invitees },
  return (
    <legend>Select pass type:</legend>
     { renderPassTypes(eventsState.selectedEvent.AssociatedPassTypes) }
     {passType.touched && passType.error && <span className="error">{passType.error}</span>}
     <EmailAddressInput { ...invitees } onKeyUp={ () => handleEmailToBarKeyUp(invitees.emailList.value) } />
                {invitees.touched && invitees.error && <span className="error">{invitees.error}</span> }
  )
}

现在，鉴于我想确保EmailAddressInput的emailList不为空，我添加了一个自定义验证规则：

const emailValidator = createValidator({
  invitees: [requiredProperty('emailList')],
  passType: required,
});

我的验证实用程序如下所示：

export function required(value) {
  if (isEmpty(value)) {
    return 'Required';
  }
}
export function requiredProperty(fieldName) {
  return function (value) {
    return required(value[fieldName]);
  };
}
export function createValidator(rules) {
  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);
      if (error) {
        errors[key] = error;
      }
    });
    return errors;
  };
}

现在，当我提交表单时EmailAddressInput文本区域为空时，createValidator返回{invitees: 'Required'} .表单提交按预期停止（万岁！），但错误消息丢失。

错误被添加为 Redux-Form field对象的errors属性，但invitees不是field对象，所以我想出于这个原因，错误集合没有被附加。

field实际上是EmailAddressInput中的emailList文本区域，但这并没有附加错误集合，因为错误集合中的相关键不同（invitees vs emailList ）

知道我怎样才能显示该错误吗？

Answer 1

诀窍是从我的验证规则函数中投影正确的结构：

export function requiredProperty(fieldName) {
  return function (value) {
    const error = required(value[fieldName]);
    if (error) {
      return { [fieldName]: error };
    }
  };
}