React Hook Form Controller未更新值问题求助

问题核心在于React Hook Form的defaultValues仅在组件初始化时生效，后续切换条目导致Item更新时，表单不会自动同步新的默认值，所以Controller始终显示旧条目数据。

给你两个直接可行的解决办法：

方法1：用reset方法手动同步新数据 #

每次选中的条目（Item）变化时，调用React Hook Form提供的reset方法，把新的条目数据重置到表单中。

修改代码如下：

// 从useForm中解构出reset方法
const { control, handleSubmit, reset } = useForm<Item>({
  defaultValues: {
    name: Item.name,
    description: Item.description,
  },
});

// 监听Item的变化，一旦更新就重置表单
useEffect(() => {
  reset({
    name: Item.name,
    description: Item.description,
  });
}, [Item, reset]); // 依赖项包含Item和reset，确保变化时触发

这样每次切换条目，表单就会自动同步新的条目数据。

方法2：给组件加key强制重新初始化（不推荐但可用） #

如果弹窗组件是基于选中条目渲染的，可以给弹窗或表单所在组件添加唯一key（比如条目的ID），切换条目时组件会重新挂载，useForm也会重新读取新的defaultValues。

示例：

<Modal key={Item.id}> {/* 用条目的唯一ID作为key */}
  {/* 你的表单代码 */}
</Modal>

注意：这种方法会触发组件重新挂载，性能不如reset方法，优先选择方法1。

你之前尝试的watch没用，是因为表单字段本身没被更新，watch自然监听不到新值——核心是要把新的Item数据同步到表单字段中。

内容的提问来源于stack exchange，提问作者J.Cart