React hook 表單欄位數組驗證不起作用

Question

我有一個字段數組，其中有一個輸入字段，我為其設定了一些驗證規則，例如 required 和 minLength。

我希望在附加新字段時立即驗證該字段。但是，這種情況並沒有發生，即使我附加空白字段，這些輸入字段的錯誤仍然未定義：

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>
  );
}

這是需要驗證的受控輸入：

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} />;
};

您可以在此處查看工作程式碼和框範例。 我需要做什麼才能使其在每次更改時得到驗證？

Answer 1

用於將欄位新增至陣列的append 方法是非同步的，執行驗證的trigger 方法也是非同步的，因此存在競爭條件，導致在向陣列註冊欄位之前觸發驗證形式。在新增陣列欄位時觸發重新驗證之前，您可以只 await 該函數結果。

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

我分叉了你的 CSB 這裡。我還添加了一個 useEffect 掛鉤，該掛鉤將在安裝元件時觸發驗證。