react-hook-form触发onSubmit后如何删除提交的data payload旧数据？

问题原因 #

你使用的是React Hook Form表单库，默认配置下，通过register注册的表单字段，即使对应的输入组件被卸载、不再渲染，字段值也不会自动从表单状态中移除，所以动态切换表单结构时，历史字段会一直累积在提交的data对象中，就出现了你看到的提交数据字段数越来越多的情况。

解决方案 #

方案1：全局开启自动卸载清理（最简便） #

初始化useForm时添加shouldUnregister: true配置，开启后组件卸载时对应字段会自动从表单状态中删除，不会残留历史数据：

// 替换你原来的useForm初始化代码
const { register, handleSubmit, formState: { errors } } = useForm({
  shouldUnregister: true,
  // 其他原有配置保留
})

方案2：提交时手动过滤有效字段 #

如果不想修改全局配置，可以在onSubmit逻辑中先过滤掉当前表单不存在的字段，只保留当前渲染的表单项对应的数据：

const onSubmit = (data) => {
  // 先过滤只保留当前表单存在的字段
  const validFieldIds = form.map(item => item.id)
  const filteredData = Object.fromEntries(
    Object.entries(data).filter(([key]) => validFieldIds.includes(key))
  )

  const formData = new FormData();
  console.log({ form, data: filteredData });
  let dataPayload = {};
  for (const key in filteredData) {
    if (formIndex === 2) {
      dataPayload = filteredData;
      return dispatch(postData({ dataPayload, formIndex, url }));
    } else {
      let item = filteredData[key];
      if (typeof item === "object") {
        item[0] ? formData.append(key, item[0]) : formData.append(key, "");
      } else {
        formData.append(key, item);
      }
    }
  }
  dataPayload = formData;
  dispatch(postData({ dataPayload, formIndex, url }));
};

方案3：表单结构更新时手动重置 #

如果是多步表单切换场景，可以在表单结构（form数组/formIndex）变化时，调用reset方法重置表单状态，或者调用unregister手动删除废弃字段：

import { useEffect } from 'react'

// 组件内添加副作用监听
useEffect(() => {
  // 切换表单时重置所有字段
  reset()
  // 或者只删除不需要的旧字段，按需选择
  // const currentFieldIds = form.map(el => el.id)
  // const allFields = Object.getOwnPropertyNames(getValues())
  // allFields.forEach(field => {
  //   if(!currentFieldIds.includes(field)) unregister(field)
  // })
}, [form, formIndex, reset, getValues, unregister])

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