Reactjs 最终表单数组字段异步验证

我正在尝试实现异步验证

react final form array

。但它回报了承诺，但没有表现出任何错误

我引用了asnyc验证的代码，并用最终表单数组创建了自己的版本

表格：

---

好吧，你以一种不允许的方式混合验证。不能在错误数组中嵌入承诺，整个验证函数必须返回承诺。

等待duplicateName（）

是重要的一位

---

您能给我建议一种处理keyup验证的方法吗？我需要在用户需要多次键入单字符的字段上执行异步验证。比如：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa。所以我希望验证api被调用一次。而不是在每一次改变中都要求它。我目前正在使用blur事件进行管理。您是否有可能取消异步验证函数的抖动？或者，您可以等到使用模糊进行模糊。
<Form
  onSubmit={onSubmit}
  mutators={{
    ...arrayMutators
  }}
  initialValues={{ customers: [{ placeholder: null }] }}
  validate={formValidate}
  render={({
    handleSubmit,
    mutators: { push, pop }, // injected from final-form-arrays above
    pristine,
    reset,
    submitting,
    values,
    errors
  }) => {
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>Company</label>
          <Field name="company" component="input" />
        </div>
        <div className="buttons">
          <button type="button" onClick={() => push("customers", {})}>
            Add Customer
          </button>
          <button type="button" onClick={() => pop("customers")}>
            Remove Customer
          </button>
        </div>
        <FieldArray name="customers" validate={nameValidate}>
          {({ fields }) =>
            fields.map((name, index) => (
              <div key={name}>
                <label>Cust. #{index + 1}</label>
                <Field
                  name={`${name}.firstName`}
                  component={testInput}
                  placeholder="First Name"
                />
                <Field
                  name={`${name}.lastName`}
                  component={testInput}
                  placeholder="Last Name"
                />
                <span
                  onClick={() => fields.remove(index)}
                  style={{ cursor: "pointer" }}
                >
                  ❌
                </span>
              </div>
            ))
          }
        </FieldArray>

        <div className="buttons">
          <button type="submit" disabled={submitting || pristine}>
            Submit
          </button>
          <button
            type="button"
            onClick={reset}
            disabled={submitting || pristine}
          >
            Reset
          </button>
        </div>
        <pre>
          nameValidate Function:{"\n"}
          {JSON.stringify(nameValidate(values.customers), 0, 2)}
        </pre>
        <pre>
          Form errors:{"\n"}
          {JSON.stringify(errors, 0, 2)}
        </pre>
        <pre>
          Form values:{"\n"}
          {JSON.stringify(values, 0, 2)}
        </pre>
      </form>
    );
  }}
/>

const duplicateName = async value => {
  await sleep(400);
  if (
    ~["john", "paul", "george", "ringo"].indexOf(value && value.toLowerCase())
  ) {
    return { firstName: "name taken!" };
  }
};

const nameValidate = values => {
  if (!values.length) return;

  const errorsArray = [];

  values.forEach(value => {
    if (value) {
      let errors = {};

      if (!value.firstName) errors.firstName = "First Name Required";
      if (Object.keys(errors).length === 0) {
        errors = duplicateName(value.firstName);
        console.log("errors", errors);
      }
      errorsArray.push(errors);
    }
  });

  return errorsArray;
};

const nameValidate = async values => {
  if (!values.length) return

  return await Promise.all(
    values.map(async value => {
      let errors = {}
      if (value) {
        if (!value.firstName) errors.firstName = 'First Name Required'
        if (Object.keys(errors).length === 0) {
          errors = await duplicateName(value.firstName)
        }
      }
      console.error(errors)
      return errors
    })
  )
}