控制器未在第一次更改时更新

Question

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

它有两个输入示例-firstName和lastName。在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

我真的不知道确切的原因，但如果您将验证规则直接放在rules道具中的Controller上，而不是将其提供给所包含输入的register，那么它会在第一次更改时正确更新。

这是代码沙盒。

这是代码的一部分：

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

Answer 2

您可以使用具有以下依赖项的useEffect：

`

const { errors, dirtyFields } = form.formState
useEffect(() => {
if (
!Object.keys(errors).length &&
dirtyFields.password &&
dirtyFields.account &&
dirtyFields.full_name &&
dirtyFields.user_name
) {
setActiveButtonRegister(true);
} else {
setActiveButtonRegister(false);
}
}, [dirtyFields, errors]);`