React中Axios GET传参问题：服务器无法获取参数求助

你的问题核心在于GET请求的参数传递与获取方式不匹配，另外客户端代码还有几个小细节需要调整，下面一步步来解决：

1. 服务器端：GET请求参数不在req.body中 #

GET请求默认不会携带请求体（body），你在Axios里配置的params会被自动拼接成URL的查询字符串（比如http://localhost:5000/api/cart/getCart?userId=xxx），所以Node.js服务器需要从req.query中获取参数，而不是req.body。

修正后的服务器代码：

router.get('/getCart', (req, res) => {
  console.log(req.query.userId); // 现在能正确拿到userId了
  User.findOne({_id: req.query.userId}, (err, userInfo) => {
    if (err) {
      // 别忘了处理错误情况
      return res.status(500).json({error: err.message});
    }
    res.json(userInfo?.Cart || []); // 可选链避免userInfo不存在的报错
  });
});

2. 客户端代码的几个细节修正 #

（1）useEffect的依赖与参数错误 #

useEffect的第一个回调函数不能接收参数，你写的useEffect((user) => { ... })是错误的，而且没有添加依赖项会导致组件每次渲染都触发请求。应该把session.userId作为依赖项，确保只有当userId变化时才发起请求。

（2）函数组件误用类组件的this.setState #

你用的是React函数组件（使用了useState），不能用类组件的this.setState，应该直接使用useState返回的更新函数。

（3）异步请求后打印状态的时机问题 #

console.log(Cart)写在useEffect外面会拿到初始的空数组，因为Axios请求是异步的，要打印最新状态应该放在then回调里，或者用另一个useEffect监听Cart的变化。

修正后的客户端代码：

// 先把useState改成带更新函数的形式
const [cart, setCart] = useState([]); 
const user = { userId : session.userId };

useEffect(() => {
  if(session.userId !== null){
    Axios({
      method: 'GET',
      url: 'http://localhost:5000/api/cart/getCart',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      params: { userId: session.userId } // 这里可以简化写法
    })
    .then(res => {
      const cartData = res.data;
      // 你的tempProducts逻辑可以简化成下面一行
      const tempProducts = cartData.data.map(item => ({...item}));
      setCart(tempProducts);
      console.log('更新后的购物车：', tempProducts); // 这里打印最新数据
    })
    .catch(err => {
      // 别忘了处理请求错误
      console.error('获取购物车失败：', err);
    })
  }
}, [session.userId]); // 添加依赖项，避免无限循环

// 如果想在cart变化时打印，可以加这个useEffect
useEffect(() => {
  console.log('当前购物车状态：', cart);
}, [cart]);

其他可选方案：用请求头传递用户ID #

如果不想把userId放在URL查询串里，也可以把它放在请求头中（比如自定义头），示例如下：

客户端修改： #

Axios({
  method: 'GET',
  url: 'http://localhost:5000/api/cart/getCart',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'X-User-Id': session.userId // 自定义头传递userId
  }
})

服务器端修改： #

router.get('/getCart', (req, res) => {
  const userId = req.headers['x-user-id'];
  console.log(userId);
  // 后续查询逻辑不变
});

这种方式更适合敏感信息的传递，但需要确保后端配置了允许自定义头的CORS规则（如果前后端跨域的话）。

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