在 useFieldArray 中编辑单个项目

【问题标题】：Editing single item in useFieldArray在 useFieldArray 中编辑单个项目
【发布时间】：2021-07-23 14:39:38
【问题描述】：

我正在使用和喜爱react-hook-form。我遇到了一个问题，我有一个项目列表（比如说在左栏中），然后当您单击任何项目时，它将在右栏中显示所选项目的编辑组件。问题是当我在项目之间切换时，嵌套数组值似乎没有正确更新数据。

我想我明白，因为没有为每个父项创建一个新的编辑组件（我只是将选定的索引向下传递），所以编辑组件中的嵌套 useFieldArray 仍然引用第一个父项。如果是这种情况，我不确定如何确保为每个被选中的项目创建一个新的useFieldArray。

这是一个复制问题的代码框：

非常感谢任何帮助。

【问题讨论】：

【解决方案1】：

我认为您可以在<Details /> 组件中映射您观看的item 的childItems 属性，而不是使用fields。当您使用watch 时，<Details /> 将在添加新的子项后重新渲染。

如果您的<Details /> 组件变得更复杂，我还建议在这里使用useWatch 而不是传递watch。从useWatch 的文档中查看此引用：

行为类似于 watch API，但是，这将隔离在组件级别重新渲染并可能导致更好的结果为您的应用程序提供性能。

这里是一个使用useWatch的例子：

【讨论】：