Reactjs 使用react hook表单控制组件时，第一次按键不起作用

我使用react钩子表单进行验证。但我们的代码是在受控组件上实现的。我在google上浏览了几个使用默认值而不是值的例子

如果我在提交表单后用默认值替换该值。表格中的值不清楚，有人能给我建议如何克服这个问题吗

import React，{useState，useffect}来自“React”；
从“../Utils/Common”导入{getIdToken}；
从“react hook form”导入{useForm}；
导出默认函数角色（）{
常量[roleName，setroleName]=useState（“”）；
常量{register，handleSubmit，errors}=useForm（）；
const handleRoleName=（事件）=>{
setroleName（event.target.value）；
};
常数handleAddRole=（）=>{
/*成功后在此调用api我有明确的角色名称*/
司特罗烯胺（“”）；
};
}
返回(
{editaddLabel}
角色名
{errors.role&&errors.role.type=='required'&&(
角色名是必需的
)}
{加载&&(
)}
拯救
取消
);

我们无法从这里看到您的代码，无论您如何“解释”，如果不实际看到您的代码“不起作用”，我们也无能为力。@crashmstr我添加了代码。我只使用了一个受控组件，但第一个应该工作的按键是任何解决方案。