如何在react-hook-form中将数字值注册为嵌套属性

Question

我有一个名为 Totals 的属性，它应该包含多个嵌套对象作为属性。

这是我想要的表单结构：

{
  totals: {
      0: {
        value: 0,
      },
    },
 };

然而，react-hook-form 文档指出，将数字设置为嵌套属性会在指示的索引处创建值，因此此代码

setValue(`totals.2`, {
  value: 0,
});

给了我这个不想要的结果：

{
  totals: [, , {
        value: 0,
      }]
 };

关于如何设置数字嵌套属性有什么想法吗？

Answer 1

这不在文档中，但有一种方法可以绕过此限制。

第一次

register()

包含子字段的字段时，库将检查该子字段是数字还是文本。
如果它是一个数字，它将创建一个数组，否则它将创建一个对象。
对于每个后续

register()

，它只会在该对象或数组上添加子字段，而不检查子字段是否是数字。

这是我们如何使用它的演示：

// first register a dummy text field
// this will cause field `foo` to be an object with one sub-field `bar`
register('foo.bar');

// then register our numeric sub-fields
register('foo.1');
register('foo.2.value');

// then get rid of the dummy sub-field `bar`
unregister('foo.bar');

// now we can set the value of those numeric fields
// and you don't have to worry about it turning into an array
setValue('foo.1', 'lorem');
setValue('foo.2.value', 'ipsum');

// here's what we get at the end
console.log(getValues());
const result = {
    "foo": {
        "1": "lorem",
        "2": {
            "value": "ipsum"
        }
    }
}

以下是将其集成到 React 组件中的方法：

您需要将其放在对

useForm()

的呼叫下方

// first we register() our dummy field in useMemo()
// because useMemo() is called right away
useMemo(() => {register('foo.bar')}, []);
// then we unregister() it inside useEffect()
// because useEffect() is called after our component is rendered
useEffect(() => {unregister('foo.bar')}, []);

这样，您将在第一次渲染期间获得

foo.bar

，并且库会将数字字段放在

foo

对象下。

如果您有多个这样的字段，则必须初始化所有这些字段，如下所示：

useMemo(() => {register('fooA.bar');register('fooB.bar')}, []);
useEffect(() => {unregister('fooA.bar');unregister('fooB.bar')}, []);