reactjs - “isValid”始终为假

Question

我正在使用自定义 register在 react-hook-form ，我无法获得 formState.isValid成为 true当我在输入中输入文本时(因此满足 required 条件)。
这是一个示例代码:

interface FormValues {
  readonly value: string;
}

export default function App() {
  console.log("rendering");

  const form: UseFormMethods<FormValues> = useForm<FormValues>({
    mode: "onChange",
    reValidateMode: "onChange",
    defaultValues: { value: "" }
  });

  useEffect(() => {
    form.register({ name: "value" }, { required: true });
  }, [form, form.register]);

  const { isValid } = form.formState;
  const value = form.watch("value");

  return (
    <div>
      <input
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
          form.setValue("value", e.target.value);
        }}
      />
      <div>IsValid: {JSON.stringify(isValid)}</div>
      <div>Errors: {JSON.stringify(form.errors)}</div>
      <div>Value: {JSON.stringify(value)}</div>
    </div>
  );
}

问题专门针对此类 register使用，而不是其他类型( ref 或 Controller )。
Here是一个完整的例子。
有人知道为什么会这样吗，我错过了什么？
此外，但这不太相关 - 有谁知道为什么每次输入更改都会触发两次渲染？
编辑
经过与 Dennis Vash 的讨论，这个问题有了一些进展，但仍然没有解决。
文档位于 https://react-hook-form.com/api/#setValue实际上确实指定了一个触发验证的选项:

(name: string, value: any, shouldValidate?: boolean) => void


You can also set the shouldValidate parameter to true in order to trigger a field validation. eg: setValue('name', 'value', true)

在我写这篇文章的时候，文档引用了 react-form-hook 的第 5 版。 ，我实际上在使用 6.0.0-rc.5所以签名有点改变，类似于以下内容:

(name: string, value: any, { shouldValidate: boolean; shouldDirty: boolean; }) => void

但是，在我使用 shouldValidate: true 时的示例中，我得到一个无限循环:

interface FormValues {
  readonly value: string;
}

export default function App() {
  console.log("rendering");

  const form: UseFormMethods<FormValues> = useForm<FormValues>({
    mode: "onChange",
    reValidateMode: "onChange",
    defaultValues: { value: "" }
  });

  useEffect(() => {
    form.register({ name: "value" }, { required: true, minLength: 1 });
  }, [form, form.register]);

  const { isValid } = form.formState;
  const value = form.getValues("value");

  return (
    <div>
      <input
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
          form.setValue("value", e.target.value, {
            shouldValidate: true
          });
        }}
      />
      <div>IsValid: {JSON.stringify(isValid)}</div>
      <div>Errors: {JSON.stringify(form.errors)}</div>
      <div>Value: {JSON.stringify(value)}</div>
    </div>
  );
}

当 isValid 时发生循环是 true ，但在 false 时停止.
你可以试试 here .输入一个键将开始连续重新渲染，清除输入将停止循环......

Answer 1

由于 React.StrictMode ，组件渲染了两次.

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions: ...

此外，为了验证您需要提交表单(尝试按 enter )，如果您在 onChange不使用引用的模式，您应该使用 triggerValidation 反而。

export default function App() {
  const {
    register,
    formState,
    watch,
    errors,
    setValue,
    handleSubmit
  }: UseFormMethods<FormValues> = useForm<FormValues>();

  useEffect(() => {
    register(
      { name: "firstName", type: "custom" },
      { required: true, min: 1, minLength: 1 }
    );
    console.log("called");
  }, [register]);

  const { isValid } = formState;
  const values = watch("firstName");

  const onSubmit = (data, e) => {
    console.log("Submit event", e);
    console.log(JSON.stringify(data));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
          setValue("firstName", e.target.value);
        }}
      />
      {/*<button>Click</button>*/}
      <div>IsValid: {JSON.stringify(isValid)}</div>
      <div>Errors: {JSON.stringify(errors)}</div>
      <div>Form value: {JSON.stringify(values)}</div>
    </form>
  );
}