注销嵌套属性会删除整个对象

Question

我创建了一个 sandbox 我的 react-hook-form 演示。

你会注意到我所有的字段都是虚拟的，没有输入组件：

const form = useForm({
  defaultValues: {
    groups: {}
  }
});

所以你看到我的默认值开始于：{ groups: {} }。

我可以这样成功添加群组：

form.register(`groups.${groupId}`);
form.setValue(`groups.${groupId}`, { name: "foo" });

这样做很好，我期待这种行为，它现在使我的价值观：{ groups: { [groupId]: { name: 'foo' } }

但是当我尝试删除时：

form.unregister(`groups.${groupId}`)

它会删除整个 groups 对象。我的值现在出乎意料地是 {}。我原以为是 { groups: {} }.

有什么想法吗？

Answer 1

RHF 将删除整个对象，如果你 unregister 里面的最后一个属性:

// {
//   groups: {
//     Group1: { ... },
//     Group2: { ... },
//   }
// }


form.unregister(`groups.Group2`);
// {
//   groups: {
//     Group1: { ... },
//   }
// }

form.unregister(`groups.Group1`);
// {}

我查看了 unregister 方法，如果里面是空的，没有 options 来保留对象的形状。解决方法是简单地创建一个虚拟字段：

const form = useForm({
  defaultValues: {
    groups: {
      _: true
    }
  }
});

并使其不可注销：

Object.entries(groups)
  .filter((g) => g[0] !== "_")
  .map(([groupId, group]) => (
    <div key={groupId}>
      <h4>Group ID: {groupId}</h4>
      <DeleteGroupButton groupId={groupId} />
    </div>
  ));

注销嵌套属性会删除整个对象

Unregistering nested property deletes the whole object

reactjs

react-hook-form

注销嵌套 属性 会删除整个对象

Unregistering nested property deletes the whole object

reactjs

react-hook-form

注销嵌套属性会删除整个对象