Reactjs react钩子窗体：setValue正在清除未注册的嵌套值

我使用的是react hook表单v7.5.0

我在下面和代码沙盒上创建了一个非常简化的演示。当

setValues

完成时，默认值中嵌套的未注册字段将被清除。有没有办法保留嵌套的未注册值

再生产解释 我有一个相关的演示贴在下面和codesandbox中

我们看到

nested.firstName

和

nested.enabled

由于

watch（“nested.enabled”）

和

而被“注册”。我们看到

嵌套。lastName

未注册。演示将显示此值消失

加载该代码段，在第一次渲染时，您会看到

form.getValues（）

被记录下来，输出：

点击“切换”

我们在下一次渲染中看到，日志输出现在显示：

我们看到

nested.lastName

已经消失了

问题: 有人知道这是为什么吗？如何让它停留

演示和代码

从“react hook form”导入{useForm}；
从“react”导入{useffect}；
导出默认函数App（）{
const form=useForm（）；
useffect（（）=>{
表单重置({
嵌套的：{
名字：“福”，
姓氏：“酒吧”，
已启用：false
}
});
}, []);
console.log(
stringify（{msg:“呈现值”，值：form.getValues（）}，null，2）
);
const enabled=form.watch（“nested.enabled”）；
返回(
form.setValue（“nested.enabled”，！enabled）}>
将“enabled”设置为{String（！enabled）}
);
}

由于v7是预期的行为，因此只有组件呈现的注册输入才处于表单状态。由于您没有注册“lastName”，它在您的表单状态下将不可用

不久前，我遇到了一个类似的问题，并在GitHub上寻求帮助，这是一个解释，为什么在v7之后会发生这种情况：

• 第一个渲染监视将从useWatch/watch返回defaultValue或defaultValue
• 然后，组件将进入渲染阶段
• 在这里，我们需要注册以调用并在渲染期间获取所有输入
• 一旦渲染结束，所有的输入引用都在钩子表单中（这是缺少的步骤）
• watch将返回视图中的内容（已注册）

在讨论中，您还可以找到比较v6和v7装载行为的CodeSandbox

---

由于我的应用程序使用的是v6，所以我一直使用该版本，没有更新到v7，因为更新意味着大量重构。我想对于v7，您需要使用另一个状态实用程序，如

useState

，并将其与当前表单数据合并。

Aw dang，非常感谢您分享此信息。它快把我逼疯了。我希望他们能解决这个问题。我现在将单独存储状态。非常感谢。太好了。很高兴我能帮忙！他解决了我们的问题！它是v7.6.0-超级酷！非常感谢你让我知道！！当然，伙计！：）

  {
    "msg": "render values",
    "values": {
      "nested": {
        "firstName": "foo",
        "lastName": "bar",
        "enabled": false
      }
    }
  }

  {
    "msg": "render values",
    "values": {
      "nested": {
        "firstName": "foo",
        "enabled": true
      }
    }
  }

import { useForm } from "react-hook-form";
import { useEffect } from "react";

export default function App() {
  const form = useForm();

  useEffect(() => {
    form.reset({
      nested: {
        firstName: "foo",
        lastName: "bar",
        enabled: false
      }
    });
  }, []);

  console.log(
    JSON.stringify({ msg: "render values", values: form.getValues() }, null, 2)
  );

  const enabled = form.watch("nested.enabled");

  return (
    <>
      <input type="text" {...form.register("nested.firstName")} />

      <button onClick={() => form.setValue("nested.enabled", !enabled)}>
        Set "enabled" to {String(!enabled)}
      </button>
    </>
  );
}