Formik中调用Axios Get接口如何实现可选参数传递

问题核心原因 #

1. 你的Axios传参写法错误：params: { values }会将所有表单参数嵌套在values字段下，和你原本预期的平级传参逻辑不符，后端无法正常解析单个字段。
2. 访问values.certificateNo报错一般是两个原因：要么你没有给Formik配置对应字段的初始值，要么你给values标注的any类型没有生效/实际字段未定义。

具体解决步骤 #

1. 实现空参数过滤逻辑

复用你之前的过滤规则，只保留非空参数，你可以写一个通用的过滤函数处理Formik返回的values：

// 可根据业务调整过滤规则，当前是过滤掉undefined、null、空字符串
const filterEmpty = (obj: Record<string, any>) => {
  return Object.fromEntries(
    Object.entries(obj).filter(([_, val]) => val != null && val !== '')
  )
}

2. 修正提交函数写法

// 先给values定义明确的字段类型，替代any，避免属性访问报错
interface FormValues {
  certificateNo?: string
  protoColNo?: string
  requestStatus?: string
  sponser?: string
  country?: string
  noOfSubjects?: number
  startDate?: string
  endDate?: string
}

const handleSubmit = async (values: FormValues) => {
  // 过滤空参数
  const params = filterEmpty(values)
  // 直接把处理后的参数传给params，不要额外嵌套
  const { data } = await axios.get('http://localhost:3000/api/certificates', {
    params
  })
  console.log(data)
  setResponse(data.data)
  alert(JSON.stringify(data))
}

3. 检查Formik初始化配置

确保你初始化Formik的时候给所有字段都配置了初始值，避免属性访问时报未定义的错误：

import { useFormik } from 'formik'

const formik = useFormik({
  initialValues: {
    certificateNo: '',
    protoColNo: '',
    requestStatus: '',
    sponser: '',
    country: '',
    noOfSubjects: undefined,
    startDate: '',
    endDate: ''
  } as FormValues,
  onSubmit: handleSubmit
})

做完以上三步后，你既可以正常通过values.字段名访问单个参数，也能实现仅非空参数被带入请求的逻辑。

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