Question

我正在尝试将异步验证器与redux形式一起使用。

我使用this作为验证的准则。

所以我有两个字段，名称和键，它们具有异步验证。我的异步验证文件如下所示：

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：“”，依此类推}，然后等于值中分配给属性的每个值。我在某处读到，如果验证失败，则不会进行异步验证，因此根据我阅读的文章，我可能会对此问题做出贡献，但是我不确定如何解决。

但是，我删除了验证器，只留下了异步验证器（它没有做任何更改）。因此，我尝试将props.asyncValidate（）添加为() => props.asyncValidate()之类的onBlur函数，这导致发生了某些事情！但是，在composeAsyncValidators函数中，似乎没有传递field参数。因此它无法调用验证器功能。

如果有人对此有任何想法，将不胜感激。

带有TypeScript问题的Redux表单具有验证和异步验证问题

0 个答案: