Pengesahan tatasusunan medan bentuk cangkuk tindak balas tidak berfungsi

Question

Saya mempunyai pelbagai medan dengan medan input yang mana saya telah menetapkan beberapa peraturan pengesahan seperti required 和 minLength.

Saya mahu medan baharu itu disahkan serta-merta apabila ia dilampirkan. Walau bagaimanapun, ini tidak berlaku dan walaupun saya menambah medan kosong, ralat untuk medan input ini kekal tidak ditentukan:

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

Ini adalah input terkawal yang perlu disahkan:

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

Anda boleh melihat contoh kod dan kotak yang berfungsi di sini. Apakah yang perlu saya lakukan untuk menjadikannya sah setiap kali saya menukarnya?

Answer 1

Hasil append 方法是异步的，执行验证的 trigger 方法也是异步的，因此存在竞争条件，导致在向数组注册字段之前触发验证形式。在添加数组字段时触发重新验证之前，您可以只 await fungsi ini untuk menambah medan pada tatasusunan.

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

Saya bercabang CSB anda di sini. Saya juga menambah cangkuk useEffect yang akan mencetuskan pengesahan apabila komponen dipasang.