Reactjs react hook form V7：卸载其注册组件后，值未清除

在V6中，当我使用

watch

方法关闭某个组件时，该组件将被卸载，任何依赖于卸载组件值的同级组件也将被卸载：

例如：

• 我们有三个组件
  ，
  和

• 当
  等于“Yes”时，将呈现

• 当
  等于1或2时，将呈现

• 最后，如果我将
  更改为“否”
  和
  将被卸载，其值将被清除

这里的工作示例

另一方面，在V7中，当我将

更改为“否”时，

已卸载，但其值未清除。因此，

不会卸载

此处的工作示例：

我已尝试设置

shouldUnregister:true

，如下所示，但仍然得到相同的行为

const { control, watch, handleSubmit } = useForm({
  mode: "all",
  shouldUnregister: true
});

---

我遗漏了什么？

这是对第7版的突破性更改。从：

重要提示：卸载后，将不再删除输入值和引用

解决方案是检测何时应卸载组件，并调用

unregister（）

手动清除字段：

const { ...props, unregister } = useForm();

useEffect(() => {
  if (watchRadio !== "Yes") {
    unregister("numOfSup");
  }
}, [watchRadio, unregister]);

你可以看到关于这个主题的问题。搜索

应注销
以查看相关信息

现场演示
谢谢@nearhuscall

另外，在react hook表单创建者的帮助下，我找到了一种更简单的方法来解决这个问题。升级其版本。
在我的例子中，我使用的是7.0.5版，并升级到7.3.5版

这种方法的好处是，您不必检测何时应该卸载组件，并调用
unregister（）
手动清除该字段

仅供参考，以下是工作CSD：

现场演示2