typescript - react-hook-form - Controller 不会在第一次更改时更新

Question

这是我的例子
https://codesandbox.io/s/react-hook-form-basic-forked-4stdl?file=/src/index.js
它有 2 个输入示例 - firstName 和 lastName。
在 firstName 中正确键入空格会显示错误。
在 lastName 中输入空格(使用 Controller )直到第二次按键才会显示错误。它不会在第一次更改时触发。
不知道这是为什么。

import React, { FC } from "react";
import { useFormContext, useWatch, Controller } from "react-hook-form";

export interface Props {
  name: string;
  label?: string;
  defaultValue?: string;
}

const ControlledInput: FC<Props> = ({
  name,
  label: labelText = "",
  defaultValue = ""
}) => {
  const { register, control, errors } = useFormContext();

  const label = labelText || name;
  const value = useWatch({
    control,
    name,
    defaultValue
  });

  console.log(
    `ControlledInput() render(), name=${name}, defaultvalue="${defaultValue}", value="${value}"`
  );
  return (
    <div>
      <Controller
        control={control}
        name={name}
        defaultValue={defaultValue}
        render={(props) => {
          const errorText = errors[name]?.type;

          // console.log('#################################');
          // console.log('name = ', name);
          // console.log(`errors[${name}] = `, errors[name]);
          // console.log('type = ', type);
          // console.log('errorText =', errorText);

          return (
            <>
              <input
                name={props.name}
                defaultValue={defaultValue}
                ref={register({
                  validate: {
                    beginSpace: (value) => /^\S/.test(value)
                  }
                })}
                type={"text"}
                placeholder={label}
                aria-label={label}
                data-error={errorText !== "" && errorText}
              />
              {errorText ? (
                <span style={{ color: "white" }}>
                  {label} ERROR: {errorText}
                </span>
              ) : null}
            </>
          );
        }}
      />
    </div>
  );
};

export default ControlledInput;

Answer 1

我真的不知道为什么会这样，但是如果您将验证规则放在 Controller 上，它会在第一次更改时正确更新直接在rules Prop 而不是将它们交给 register包含的输入。
Here is the codesandbox .
这是代码的一部分:

      <Controller
        control={control}
        name={name}
        defaultValue={defaultValue}
        rules={{
          validate: {
            beginSpace: (value) => /^\S/.test(value)
          }
        }}
        render={(props) => {
          const errorText = errors[name]?.type;
          return (
            <>
              <input
                name={props.name}
                defaultValue={defaultValue}
                ref={register}
                type={"text"}
                placeholder={label}
                aria-label={label}
                data-error={errorText !== "" && errorText}
              />
              {errorText ? (
                <span style={{ color: "white" }}>
                  {label} ERROR: {errorText}
                </span>
              ) : null}
            </>
          );
        }}
      />