javascript - React hook 形式用以前的值注册新字段

Question

我正在使用react-hook-forms来收集本地化内容，当我在useForm方法中设置defaultValues字段时，我可能没有设置所有默认值。例如，它可能如下所示:

{
  en: {
    first_text: "English first text",
    second_text: "English second text"
  }
}

注意:将每个字段的默认空值添加为每个区域设置的空字符串并不是真正的选择。

我在这里创建了一个简化的代码沙箱:https://codesandbox.io/s/react-hook-form-with-multi-locale-pnx11?file=/src/Child.tsx显示上面提到的 2 个字段和一个语言切换器。

当我通过单击按钮切换语言时，我遇到的问题是我的输入字段(和 formData)会使用字段中存在的先前数据进行更新，而不是显示空输入字段。

所以:

{
  en: {
    first_text: "English first text",
    second_text: "English second text"
  }
}

变成:

{
  en: {
    first_text: "English first text",
    second_text: "English second text"
  },
  fr: {
    first_text: "English first text", // instead of ""
    second_text: "English second text" // instead of ""
  }
}

据我了解，当 Controller 组件重新渲染时，表单值会更新，但我不明白为什么以及如何防止这种情况发生。我找不到一种方法来确保如果我使用不会导致任何默认值的路径调用 getValues，则渲染一个空字符串(或另一个默认值)。

我尝试过的一些事情是传递一个空字符串作为 Controller 组件的默认值，并取消注册字段，但没有成功。

任何建议/帮助将不胜感激!

Answer 1

查看代码，我认为当 <Controller> 时，表单字段的初始注册发生了一些问题。标签首先在表单中注册。更改区域设置会产生一个新的表单数据路径(name属性)，但我不相信它会重新渲染，或者至少内部存在一些奇怪的引用。

您可以通过将表单路径添加为key来强制 Controller 重新渲染(从而根据新的区域设置路径注册新的表单输入)。属性到 Controller 标签。然后，这将创建树的该部分的一个新实例，并在表单 Hook 调试器中创建一个新的表单绑定(bind)。

<Controller control={control} name={firstTextId} key={firstTextId} ....