Typescript react hook表单-控制器在第一次更改时未更新

这是我的例子

它有两个输入示例-firstName和lastName。 在firstName中键入空格将正确显示错误

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

不知道为什么会这样

import React，{FC}来自“React”；
从“react hook form”导入{useFormContext，useWatch，Controller}；
导出接口道具{
名称：字符串；
标签？：字符串；
defaultValue？：字符串；
}
常量可控输入：FC=({
名称
标签：labelText=“”，
defaultValue=“”
}) => {
常量{register，control，errors}=useFormContext（）；
常量标签=标签文本| |名称；
常量值=useWatch({
控制
名称
默认值
});
console.log(
`ControlleInput（）render（），name=${name}，defaultvalue=“${defaultvalue}”，value=“${value}”`
);
返回(
{
const errorText=错误[名称]？.类型；
//控制台日志；
//log（'name='，name）；
//log（`errors[${name}]=`，errors[name]）；
//log（'type='，type）；
//log（'errorText='，errorText）；
返回(
/^\S/.test（值）
}
})}
类型={“文本”}
占位符={label}
aria label={label}
数据错误={errorText！==“”&&errorText}
/>
{错误文本(
{label}错误：{errorText}
)：null}
);
}}
/>
);
};
出口违约控制投入；

我真的不知道确切的原因，但是如果您将验证规则直接放在

控制器的
规则中，而不是将它们放在所包含输入的
寄存器中，那么它会在第一次更改时正确更新


这是代码的一部分：

/^\S/.test（值）
}
}}
渲染={（道具）=>{
const errorText=错误[名称]？.类型；
返回(
{错误文本(
{label}错误：{errorText}
)：null}
);
}}
/>
是，它确实会触发，但现在删除文本，但不会清除错误。这是我发现的控制器的另一个问题。它似乎不会在第一次更改时更新。正常输入也会发生相同的行为：如果您放置一个空格，然后将其删除，错误将保留。这是因为您的正则表达式检查是否至少有一个非空格字符。您可以将其更改为类似以下内容，以将“nothing”也包含为有效值：
（value）=>/（^\S）|（^$）/。test（value）
谢谢。很好。我也有同样的问题，通过在控制器上使用规则来解决-谢谢。我也有同样的问题，通过在控制器上使用规则来解决-谢谢