如何从react-hook-form状态中移除指定子项对象

问题 #

我正在开发一个包含多个子项的表单布局，每个子项拥有独立的姓名、姓氏、电话及邮箱数据。

子项数据结构如下：

[id]:{
   name:"",
   surname:"",
   phone:"",
   email:""
}

我通过设置keepValue:true的unregister方法切换子项，其中selectedChildId对应深色背景的激活子项：

useEffect(() => {
    unregister(selectedChildId, { keepValue: true });
}, [selectedChildId]);

这种方式无需额外存储状态即可在子项间切换，一切运行正常。但删除子项后，react-hook-form仍会保留该子项的空字符串值对象，我希望移除这个特定对象，请问有什么方法可以实现？

解决方案 #

方法一：删除时调用不带keepValue的unregister #

切换子项时用keepValue: true保留值没问题，但删除子项时，直接调用默认的unregister（默认keepValue: false），就能完全注销该字段并移除对应空对象：

const handleDeleteChild = (childId) => {
    // 注销子项，自动移除对应值
    unregister(childId);
    // 更新子项列表，过滤掉已删除的id
    setChildItems(prev => prev.filter(item => item.id !== childId));
};

方法二：手动用setValue清空对应键 #

如果unregister未完全清理，可直接将对应子项的键设为undefined，react-hook-form会自动移除这个空对象：

setValue(childId, undefined);

方法三：提交表单时过滤空对象 #

在提交阶段对表单数据做过滤，移除所有值全为空字符串的子项：

const onSubmit = (data) => {
    const cleanedData = Object.fromEntries(
        Object.entries(data).filter(([_, childData]) => 
            // 判断子项是否存在非空值
            Object.values(childData).some(val => val.trim() !== "")
        )
    );
    // 使用清理后的cleanedData执行后续提交逻辑
};

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