React-Native使用Formik+axios发POST到Express后端无响应 报400错误

1 请求未发送的核心原因 #

你初始填写的URL localhost:3001/register 缺少HTTP协议头，Axios无法识别请求协议，直接抛出异常进入catch回调，因此不会触发then内的打印逻辑。

2 补充协议后返回400错误的排查与修复 #

400状态码为请求参数错误，可按以下步骤排查：

• 首先在catch回调中打印完整错误信息，查看后端返回的具体参数错误提示：

  .catch(error => {
    // 优先打印后端返回的错误描述
    console.log(error.response?.data || error.message)
  })
  

• 常见参数不匹配问题：
  • 缺少必填字段：你的同意协议勾选状态isSelected没有纳入Formik参数提交，多数注册接口会要求校验该字段，需要将其加入初始值并绑定到Checkbox组件
  • 字段格式不符合要求：对比你Postman提交的硬编码参数和表单打印的values，校验邮箱格式、密码与确认密码一致性、生日格式是否匹配后端要求
  • 后端未配置JSON解析中间件：Axios默认提交application/json格式的请求体，需要确认你的Express服务已经开启JSON解析：

    // Express入口文件添加该中间件
    app.use(express.json())
    

3 修复后的核心代码示例 #

Formik初始值配置 #

initialValues={{ 
  name: "",
  email: "",
  password: "", 
  passwordConfirmation: "",
  birthday: "",
  agreeTerms: false // 新增同意协议字段
}}

onSubmit逻辑修改 #

onSubmit={values => {
  console.log(values)
  console.log('its working!')
  // 补充HTTP协议头
  const url = 'http://localhost:3001/register';
  axios
    .post(url, values)
    .then(response => {
      console.log('post request made!')
      if (response.data.status) {
        console.log(response);
      }
    })
    .catch(error => {console.log(error.response?.data || error.message)})
}}

Checkbox绑定修改 #

<CheckBox
  value={values.agreeTerms}
  onValueChange={handleChange('agreeTerms')}
  style={styles.checkbox} 
  boxType="square"
  onFillColor="#AB73F7"
  onTintColor="#AB73F7"
  onCheckColor="#fff"
/>

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