react-hook-form如何过滤未渲染组件对应的表单提交数据

你遇到的是react-hook-form默认保留已注册字段值的问题，默认情况下即便字段组件被条件渲染卸载，之前注册的字段依然会保留在表单提交数据中，你可以通过以下方式实现需求：

方法1：全局开启自动卸载未渲染字段（最简便） #

在初始化useForm时添加shouldUnregister: true配置即可，开启后所有被卸载的表单项会自动从表单值集合中移除，提交时只会返回当前已渲染的字段值。

完整代码示例：

import { useForm } from "react-hook-form";

export default function App() {
  const somecondition = true; // 你的条件控制变量
  // 核心配置：开启自动卸载未渲染字段
  const { register, handleSubmit } = useForm({
    shouldUnregister: true
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input defaultValue="test001" {...register("var001")} />
      {somecondition && (
        <>
          <input defaultValue="test002" {...register("var002")} />
          <input defaultValue="test003" {...register("var003")} />
        </>
      )}
      <input type="submit" />
    </form>
  );
}

方法2：提交时手动过滤字段 #

如果你不想全局开启shouldUnregister，也可以在提交回调中根据渲染条件手动过滤数据：

const onSubmit = (data) => {
  const filteredData = { var001: data.var001 };
  if (somecondition) {
    filteredData.var002 = data.var002;
    filteredData.var003 = data.var003;
  }
  console.log(filteredData);
};

两种方案都可以实现预期效果：

• 当somecondition为false时，输出{"var001": "test001"}
• 当somecondition为true时，输出{"var001": "test001","var002": "test002","var003": "test003"}

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