Die Validierung des React-Hook-Formularfeld-Arrays funktioniert nicht

Question

Ich habe ein Array von Feldern mit einem Eingabefeld, für das ich einige Validierungsregeln wie required 和 minLength festgelegt habe.

Ich möchte, dass das neue Feld sofort validiert wird, wenn es angehängt wird. Dies passiert jedoch nicht und selbst wenn ich leere Felder anhänge, bleibt der Fehler für diese Eingabefelder undefiniert:

function App() {
  const useFormMethods = useForm({
    defaultValues: {
      test: [{ firstName: "Bill", lastName: "Luo" }]
    },
    mode: "onChange"
  });
  const { fields, append, remove } = useFieldArray({
    control: useFormMethods.control,
    name: "test",
    rules: {
      minLength: 4
    }
  });

  const onSubmit = (data) => console.log("data", data);

  return (
    <FormProvider {...useFormMethods}>
      <form onSubmit={useFormMethods.handleSubmit(onSubmit)}>
        <h1>Field Array </h1>
        <span className="counter">Render Count: {renderCount}</span>
        <ul>
          {fields.map((item, index) => {
            return (
              <li key={item.id}>
                <FormControlledInput name={`test.${index}.firstName`} />
                <FormControlledInput name={`test.${index}.lastName`} />
                <button type="button" onClick={() => remove(index)}>
                  Delete
                </button>
              </li>
            );
          })}
        </ul>
        <section>
          <button
            type="button"
            onClick={() => {
              append({ firstName: "", lastName: "" });
            }}
          >
            append
          </button>
        </section>

        <input type="submit" />
      </form>
    </FormProvider>
  );
}

Dies ist eine kontrollierte Eingabe, die validiert werden muss:

export const FormControlledInput = ({ name }) => {
  const {
    control,
    formState: { errors }
  } = useFormContext();

  const { field, fieldState } = useController({
    name,
    control,
    rules: { required: true }
  });

  console.log(`fieldState error: `, fieldState.error);
  console.log(`formState errors: `, errors);

  return <input onChange={field.onChange} value={field.value} />;
};

Hier können Sie den Arbeitscode und das Boxbeispiel sehen. Was muss ich tun, damit es bei jeder Änderung validiert wird?

Answer 1

用于将字段添加到数组的 append 方法是异步的，执行验证的 trigger 方法也是异步的，因此存在竞争条件，导致在向数组注册字段之前触发验证形式。在添加数组字段时触发重新验证之前，您可以只 await 该函数结果。

 {
              await append({ firstName: "", lastName: "" });
              useFormMethods.trigger();
            }}
          >
            append
          

我分叉了你的 CSB 这里。我还添加了一个 useEffect 挂钩，该挂钩将在安装组件时触发验证。