react-hook-form - 控制器在第一次更改时未更新

Question

这是我的示例 https://codesandbox.io/s/react-hook-form-b ​​asic-forked-4stdl?file=/src/index.js

它有 2 个输入示例 - 名字和姓氏。在firstName 中正确键入空格会显示错误。

在lastName 中输入空格（使用控制器）直到第二次按键后才会显示错误。它不会在第一次更改时触发。

不知道这是为什么。

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

我真的不知道到底为什么，但如果您将验证规则直接放在propController中rules而不是将它们提供给register包含的输入，它会在第一次更改时正确更新。

这是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}
            </>
          );
        }}
      />