React Formik动态值传入Axios请求体返回500错误但硬编码值正常

问题排查 #

• 最核心的错误是变量名不匹配：你将序列化后的请求内容存储在BodyContent变量中，但axios配置项里的data字段赋值的是未声明的data变量，相当于给后端传递了空/非法请求体，后端校验失败触发500错误。代码里的console.log(data)同样是无效代码，data变量从未被定义。
• 其次需要校验Formik传入参数的合法性：硬编码的参数都是符合后端要求的有效值，你需要确认动态传入的_bfn/_bln等7个参数是否存在空值、类型错误、长度超限等不符合后端接口规则的情况。
• 隐性问题：函数声明为async但内部没有用await处理axios异步逻辑，会导致函数调用方无法正确获取异步返回结果，也无法通过常规的try catch捕获请求异常。

修复后的参考代码 #

export async function fetchAcuantData (_bfn, _bln, _bsn, _bc, _bs, _bz, _bco) {
  // 可选：先加参数校验，避免非法参数传给后端
  if (!_bfn || !_bln /* 其余字段可按需补充校验规则 */) {
    console.error('请求参数不完整')
    return
  }
  const BodyContent = JSON.stringify({
    "bfn": _bfn,
    "bln": _bln,
    "bsn": _bsn,
    "bc": _bc,
    "bs": _bs,
    "bz": _bz,
    "bco":_bco
  });
  const config = {
    method: 'post',
    url: 'http://localhost:4041/checkuser',
    headers: { 
      'Content-Type': 'application/json'
    },
    // 替换为正确的请求体变量
    data: BodyContent
  };
  
  try {
    const response = await axios(config)
    console.log(JSON.stringify(response.data));
    return response.data
  } catch (error) {
    console.error('请求失败：', error)
    throw error
  }     
}

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