React 18.2.0中如何正确传递state值作为Axios请求参数？

错误原因 #

你遇到的TypeMismatchException源于两个核心问题：

1. Axios的params属性仅接受普通对象，而非URLSearchParams实例。传入URLSearchParams时，Axios会将其转为字符串[object Object]，后端无法解析为数字类型。
2. 你手动设置了Content-Type: application/json，却将参数放在URL查询串中，请求头与参数传递方式不匹配，导致后端解析逻辑混乱。

正确传参方式 #

根据后端的参数接收规则，选择以下两种方案之一：

方案1：参数放在URL查询字符串中

直接传递普通对象给params，Axios会自动完成编码处理：

const config = {
  params: {
    count: count
  }
};

await Api.post(EndPoints.sample.URL, {}, config)
  .then(res => res)
  .catch(err => err);

方案2：参数放在JSON请求体中（POST请求推荐方式）

将参数作为POST请求的第二个参数（请求体）传递，Axios会自动设置正确的Content-Type：

await Api.post(EndPoints.sample.URL, { count: count })
  .then(res => res)
  .catch(err => err);

额外检查 #

传参前执行console.log(count)，确认count是数字类型而非对象。如果其他设置count的函数不小心将其赋值为对象，也会触发同样的解析错误。

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