基于React-Hook-Form、MUI和Yup的表单字段批量清除全局方案咨询

下面提供几个无需修改大量业务代码的全局解决方案，针对性解决你遇到的Yup校验、输入框显示、后端Spring枚举转换问题：

方案1：全局扩展Yup规则，自动允许非必填字段为null #

不用逐个给字段加.nullable()，直接在项目入口文件全局配置Yup，让所有非必填字段默认接受null值：

import * as Yup from 'yup';

// 重写Yup字符串类型的默认规则
const originalString = Yup.string;
Yup.string = function () {
  return originalString().test('allow-null-for-non-required', '', function(value) {
    // 非必填字段允许为null，必填字段仍遵循原有校验
    if (!this.schema._exclusiveRequired && value === null) return true;
    return true;
  });
};

// 处理枚举类型（基于Yup.mixed().oneOf()定义的枚举）
const originalMixed = Yup.mixed;
Yup.mixed = function () {
  return originalMixed().test('allow-null-enum-non-required', '', function(value) {
    if (!this.schema._exclusiveRequired && value === null) return true;
    return true;
  });
};

配置后，清除字段时直接设为null即可，非必填字段不会触发Yup的null校验；后端Spring只需确保枚举字段允许为null（实体类字段用@Nullable或直接定义为可为null的枚举类型）。

方案2：全局工具函数+后端枚举转换器，按字段类型适配清除值 #

写一个全局清除函数，自动识别字段类型设置对应清除值，同时后端配置全局转换器处理空字符串转null：

前端全局工具函数 #

export const clearFormFields = (formikInstance, fieldNames) => {
  const updateMap = {};
  
  fieldNames.forEach(field => {
    const fieldSchema = formikInstance.validationSchema?.fields[field];
    // 判断是否为枚举字段
    const isEnum = fieldSchema?._oneOf?.length > 0;
    
    // 枚举字段设为null，普通输入设为空字符串
    updateMap[field] = isEnum ? null : '';
  });
  
  // 用setFieldValue更新，第三个参数设为false保留dirty状态
  Object.entries(updateMap).forEach(([field, val]) => {
    formikInstance.setFieldValue(field, val, false);
  });
};

后端Spring全局枚举转换器 #

import org.springframework.core.convert.converter.Converter;
import org.springframework.stereotype.Component;

@Component
public class StringToEnumConverter<T extends Enum<T>> implements Converter<String, T> {
    private final Class<T> enumType;

    public StringToEnumConverter(Class<T> enumType) {
        this.enumType = enumType;
    }

    @Override
    public T convert(String source) {
        // 空字符串直接返回null，适配前端传入的空值
        if (source == null || source.trim().isEmpty()) {
            return null;
        }
        return Enum.valueOf(enumType, source.trim());
    }
}

方案3：全局扩展Formik的setFieldValue，自动处理undefined清除 #

如果偏好用undefined作为清除标记，全局修改Formik的字段更新逻辑，自动把undefined转成合适的清除值：

import { useFormik } from 'formik';

export const useCustomFormik = (options) => {
  const formik = useFormik(options);
  
  const customSetFieldValue = (field, value, shouldValidate = true) => {
    let processedVal = value;
    const fieldSchema = options.validationSchema?.fields[field];
    const isEnum = fieldSchema?._oneOf?.length > 0;
    
    // 遇到undefined时，按需转成null或空字符串
    if (value === undefined) {
      processedVal = isEnum ? null : '';
    }
    
    formik.setFieldValue(field, processedVal, shouldValidate);
  };
  
  return { ...formik, setFieldValue: customSetFieldValue };
};

之后项目里统一用useCustomFormik替代原生useFormik，调用setFieldValue(field, undefined)就能自动完成清除，同时避开所有校验和转换问题。

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