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

问题描述 #

我需要让表单中的totals属性是一个包含数值型键的嵌套对象，预期结构如下：

{
  "totals": {
      "0": {
        "value": 0
      }
    }
}

但使用react-hook-form的setValue方法时，执行以下代码：

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

得到的结果不符合预期，totals被自动转成了数组：

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

解决方法 #

方法1：使用括号语法指定对象键 #

react-hook-form会把.后跟随的数字默认解析为数组索引，改用括号包裹数值键名，就能强制它识别为对象的属性：

setValue(`totals['2']`, { value: 0 });

执行后会得到预期的对象结构：

{
  "totals": {
      "2": {
        "value": 0
      }
    }
}

方法2：初始化时明确totals为对象类型 #

在调用useForm时，给defaultValues设置totals为初始空对象，避免react-hook-form自动推断为数组类型：

const { register, setValue } = useForm({
  defaultValues: {
    totals: {}
  }
});

之后除了用括号语法，也可以通过更新整个对象的方式设置属性：

setValue('totals', prevTotals => ({
  ...prevTotals,
  '2': { value: 0 }
}));

内容的提问来源于stack exchange，提问作者Charles Semaan