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

Question

我为我的react-hook形式的演示创建了一个沙箱。

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

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

如果您unregister最后一个属性，RHF将删除整个对象:

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

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

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

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>
));