我尝试使用react-hook-form来验证输入。但我发现，如果输入放在 Material UI 的对话框组件中，react-hook-form 的 setValue 无法按预期工作，但当我删除 Dialog 组件时它会工作。我猜测原因是在组件挂载之前设置了该值，但仍然找不到解决方案。

该值将从服务器检索，因此我无法使用react-hook-form的defaultValues。

https://codesandbox.io/s/react-hook-form-material-ui-twbbw

我尝试使用useState来控制输入值，但还有另一个问题。当清除输入后，单击提交按钮，并显示错误消息，我输入的第一个字母将不会显示。

https://codesandbox.io/s/react-hook-form-material-ui-ve2en

请您参考如下方法:

问题出在寄存器函数上。在调用 Textfield 的 ref 后，您将使用 register 注册 Textfield。

在初始渲染后，调用 useEffect 以使用 setValue 将名称设置为 123。如果 open 为 true，则对话框内容将在 useEffect 之后渲染。 内容渲染完成后，调用带有寄存器的 ref，并将 Textfield 的默认值(此处为 undefined)设置为 name 的值。

这就是为什么文本字段的值显示为“”。您需要在调用 render 和 ref 回调后调用 setValue，以便该值保持不变。

您有两种选择:

1. 在 open 更改后，通过异步延迟(setTimeout 或 Promise)在 useEffect 中设置异步值。因此，如果将 open 添加到 useEffect dependentecy 数组并设置值 async，它就可以工作。这是Sandbox .
2. 设置文本字段的默认值或使用 useForm({defaultValues: {name: '123}}) 将默认值添加到 Hook 。