Redux Form с проблемами TypeScript с проверкой и проверкой asyn c - PullRequest
Новая
       8

Redux Form с проблемами TypeScript с проверкой и проверкой asyn c

0 голосов
/ 02 марта 2020

Я пытаюсь использовать asyn c валидатор с избыточной формой.

Я использовал this в качестве руководства для проверки.

Итак, у меня есть два поля, имя и ключ, которые имеют асинхронную проверку c. Мой файл проверки asyn c выглядит следующим образом: 

export const composeAsyncValidators = (validatorFns) => {
  return async (values, dispatch, props, field) => {
    const validatorFn = validatorFns[field];
    await validatorFn(values, dispatch, props, field);
  };
};


export const asyncValidateName = (values, dispatch: Dispatch<any>, props: MyFormProps, field) => {
  /* Handle validate */
};

export const asyncValidateKey = (values, dispatch: Dispatch<any>, props: MyFormProps, field) => {
  /* Handle validate */
};

const asyncValidate = composeAsyncValidators({
  name:asyncValidateName,
  key:asyncValidateKey
});

export default asyncValidate;

, а затем в форме у меня есть 

  asyncValidate,
  asyncBlurFields: ["name","key"],

дополнительно, форма проверки, которая выглядит следующим образом: 

validate: (values: any, props: MyFormProps) => {
  const errors: any = {};
  if (values) {
    if (!values.name) {
      errors.productName = "Please enter a name"
    }
    if (!values.key) {
      errors.key = "Please enter the key"
    }
  }

  return errors;
}

Поле отображается следующим образом: <Field name={"name"} {...this.props} component={this.renderName} />

, а renderName выглядит так: 

  public renderName(props) {
    return (
      <ModalField
        label={i18n.t("name")}
        onInputBlur={(param) => props.blur("name", param.value)}
        onInputChanging={(param) => props.change("name", param)}
        value={props.input.value}
      />
    );
  }

Вызывается несколько раз. Каждый раз, когда он проходит проверку, значения меняются от ожидаемых значений до каждого значения, объявленного в начальных значениях. Таким образом, первые значения равны {name: "", key: "", et c}, а затем равняются каждому из значений, которые назначены свойствам в значениях. Я где-то читал, что проверка asyn c не произойдет, если проверка не удалась, поэтому у меня есть ощущение, что это может способствовать проблеме, основанной на статье, которую я прочитал, но я не уверен, как это исправить.

Однако я удалил валидаторы и оставил только валидатор asyn c (который ничего не изменил). Поэтому я попытался добавить props.asyncValidate () в качестве функции onBlur, например () => props.asyncValidate() Это вызвало что-то! Однако в функции composeAsyncValidators параметр поля не передается. Поэтому он не может вызывать функцию валидатора.

Если у кого-то есть какие-либо идеи по этому поводу, это будет чрезвычайно ценно.

...