React Hook Form中具有共享名称的不同输入

Question

下面的屏幕截图包含项目的列表和所选项目的页面。

当我点击列表中的任何项目时，页面会更新。

对象由id、fullName、username组成。

在页面内有一个文本输入，名称为“用户名”，用于所有项目。问题是当我选择不同的项目时文本输入不会改变。我想为不同的项目提供不同的文本输入。我们如何在 React Hook Form 中处理它？

项目链接： https://codesandbox.io/s/busy-smoke-7zgew

Answer 1

将此添加到 页面 解决了这个问题。

useEffect(() => {
  setValue("username", profile.username);
}, [id]);