React Hook Form 提供 dirtyFields 状态，可精准识别用户修改过的字段；结合递归过滤逻辑，即可在提交时自动剔除未变更数据，减少冗余 API 请求。
react hook form 提供 `dirtyfields` 状态，可精准识别用户修改过的字段；结合递归过滤逻辑，即可在提交时自动剔除未变更数据，减少冗余 api 请求。
在使用 React Hook Form 实现编辑功能（如调用 editData 更新资源）时，若后端接口要求仅接收实际变更的字段（例如支持 PATCH 语义、避免覆盖默认值或触发不必要的校验），直接提交整个 formValues 往往不安全也不高效。幸运的是，RHF 内置的 dirtyFields 属性正是为此场景设计的——它以布尔值或嵌套对象形式记录哪些字段被用户主动修改过。
✅ 核心方案：基于 dirtyFields 构建差异数据
handleSubmit 的回调函数会接收到两个关键参数：data（当前所有字段值）和 event（原生事件）。但更重要的是，你可以通过 formState.dirtyFields 实时获取变更标记。以下是一个健壮、支持嵌套对象与数组的工具函数：
function getDirtyValues(
dirtyFields: Record<string unknown> | boolean,
allValues: Record<string unknown>
): Record<string unknown> {
// 叶子节点被修改（true）或整个数组被标记为 dirty → 全量保留
if (dirtyFields === true || Array.isArray(dirtyFields)) {
return allValues;
}
// 递归处理对象字段
const result: Record<string unknown> = {};
for (const key in dirtyFields) {
if (Object.prototype.hasOwnProperty.call(dirtyFields, key) &&
Object.prototype.hasOwnProperty.call(allValues, key)) {
const value = allValues[key];
const dirtyFlag = dirtyFields[key];
// 若子字段有变更，则递归提取；否则跳过该字段
if (dirtyFlag !== false && dirtyFlag !== undefined) {
result[key] = getDirtyValues(dirtyFlag, value);
}
}
}
return result;
}</string></string></string></string>
? 使用示例
import { useForm } from 'react-hook-form';
function EditForm({ initialData }: { initialData: User }) {
const { register, handleSubmit, formState: { dirtyFields } } = useForm<user>({
defaultValues: initialData,
});
const onSubmit = handleSubmit((data) => {
// ✅ 仅提取用户真正修改过的字段
const changedData = getDirtyValues(dirtyFields, data);
// 发送精简后的数据（如 PATCH /api/users/123）
editData(changedData)
.then(() => alert('更新成功'))
.catch(console.error);
});
return (
<form onsubmit="{onSubmit}">
<input><input><input><button type="submit">保存更改</button>
</form>
);
}</user>
⚠️ 注意事项
- dirtyFields 仅反映用户交互引起的变更（如输入、选择），不包含 setValue 等程序化设置引发的“脏”状态（除非显式传入 { shouldDirty: true }）；
- 对于数组字段（如 tags: string[]），RHF 将整个数组标记为 true —— 因此工具函数会保留全部数组项，这是合理行为（无法安全推断“部分元素未变”）；
- 若需更细粒度控制（如对比原始值而非初始默认值），建议结合 useForm 的 defaultValues 或手动缓存初始快照进行深比较；
- 始终确保后端能正确处理部分字段更新（如空字符串、null 是否应被写入）。
通过 dirtyFields + 递归提取，你既能保持 RHF 的简洁性，又能实现语义清晰、网络友好的增量提交策略。
