如何在React-Final-Form的handleSubmit函数中正确获取FormState（dirtyFields、pristine等）并仅提交修改字段

问题描述 #

我希望在提交表单时只把修改过的字段（dirty字段）发送给API，请问怎么在React-Final-Form的handleSubmit处理函数中获取这些字段？以下是我的相关代码：

const handleSubmitSettings = (fields, formApi) => { console.log("Submitted with fields:", fields); }; 
const handleValidate = (props) => { console.log("Validated with props:", props); }; 
return ( 
<Form onSubmit={handleSubmitSettings} validate={handleValidate} > 
{({handleSubmit,form: {submit, change}}) => ( 
<form onSubmit={handleSubmit} className={classes.formFlexContainer}> 
<SettingsHeader/> 
<SettingsContainer/> 
</form> 
)} 
</Form> 
);

解决方案 #

React-Final-Form提供了内置的API来追踪表单的脏字段，同时你也可以手动对比初始值和当前值来实现需求，两种方式各有适用场景：

方法1：利用Form API的getState()直接获取dirtyFields

这是最简洁的方式，React-Final-Form的formApi对象里的getState()方法会返回包含dirtyFields的表单状态对象——dirtyFields是一个键值对，键是字段名，值为true表示该字段被修改过。你可以基于这个对象过滤出仅修改过的字段：

const handleSubmitSettings = (fields, formApi) => {
  // 获取表单状态中的dirtyFields
  const { dirtyFields } = formApi.getState();
  
  // 过滤出仅被修改过的字段
  const dirtyOnlyFields = Object.fromEntries(
    Object.entries(fields).filter(([fieldName]) => dirtyFields[fieldName])
  );

  console.log("仅提交修改过的字段:", dirtyOnlyFields);
  // 这里调用你的API，传入dirtyOnlyFields即可
};

方法2：手动对比初始值与当前值（适合复杂字段场景）

如果你的表单包含复杂类型的字段（比如嵌套对象、数组），或者需要自定义对比逻辑，可以通过表单的初始值和当前字段值进行对比：

首先，确保你给Form组件传入了initialValues，然后在提交时获取初始值并对比：

// 示例初始值，根据你的实际业务调整
const initialSettingsValues = {
  username: "george",
  email: "george@example.com",
  preferences: {
    notifications: true,
    theme: "light"
  }
};

const handleSubmitSettings = (fields, formApi) => {
  // 获取表单的初始值
  const { initialValues } = formApi.getState();
  
  const dirtyOnlyFields = {};
  
  // 遍历所有字段，对比初始值和当前值
  Object.keys(fields).forEach(fieldName => {
    // 注意：如果是复杂类型，建议用深对比，比如lodash.isEqual
    const hasChanged = !_.isEqual(fields[fieldName], initialValues[fieldName]);
    if (hasChanged) {
      dirtyOnlyFields[fieldName] = fields[fieldName];
    }
  });

  console.log("仅提交修改过的字段:", dirtyOnlyFields);
  // 调用API提交
};

// 记得给Form组件传入initialValues
return ( 
<Form 
  onSubmit={handleSubmitSettings} 
  validate={handleValidate}
  initialValues={initialSettingsValues}
> 
{({handleSubmit,form: {submit, change}}) => ( 
<form onSubmit={handleSubmit} className={classes.formFlexContainer}> 
<SettingsHeader/> 
<SettingsContainer/> 
</form> 
)} 
</Form> 
);

注意事项 #

• 对于简单类型字段（字符串、数字、布尔值），方法1完全够用，无需额外处理；
• 对于复杂类型字段，方法2中的深对比是必要的，否则会因为引用不同误判字段为修改过；
• dirtyFields是React-Final-Form内部自动维护的，它会忽略字段值从初始值改回初始值的情况（比如先改了用户名又改回原来的，这个字段不会被标记为dirty），这一点和手动对比的逻辑一致。

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