React中Axios发送GET请求后端接收userName为undefined如何解决

问题根因 #

• axios发送GET请求时，第二个参数为请求配置对象，查询参数需要放在配置的params字段下，你直接传递{userName: user.userName}不符合axios的传参规则，参数未被正确携带到请求中。
• HTTP GET请求本身没有请求体，后端从req.body中获取GET请求的参数本身就无法获取到，GET请求的查询参数需要从req.query中读取。

修复方案 #

1. 前端代码修改 #

调整axios请求的参数传递方式，同时修正状态赋值的类型错误（found初始为数组，不要转成对象）：

// 原来的请求代码
// const response = await api.get("/search", {userName: user.userName});
// 替换为
const response = await api.get("/search", {
  params: {
    userName: user.userName
  }
});

// 原来的setFound逻辑也修正，保持数组类型
// setFound({ ...response.data });
setFound(response.data || []);

2. 后端代码修改 #

调整参数读取位置，同时补充空值校验避免报错：

// 原来的参数读取
// const { userName } = req.body;
// 替换为
const { userName } = req.query;

// 补充空值判断，避免userName为空时调用toLowerCase报错
if (!userName?.trim()) {
  return res.status(200).json([]);
}

可选方案（适配复杂查询场景） #

如果后续搜索需要传递的参数较多，也可以将接口改为POST请求：

• 前端改为api.post("/search", {userName: user.userName})
• 后端路由改为router.post("/search", ...)，此时就可以正常从req.body中读取参数

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