ReactJS向后端API传递多个参数异常：参数值未正确替换

嘿，我一眼就瞅出问题所在了——你在客户端的axios请求里用了单引号包裹URL，但要解析${name}这种变量占位符，必须用**反引号（`）**来创建模板字符串！这就是为什么后端收到的是占位符文本而不是用户实际输入的值。

快速修复：修正客户端URL字符串格式 #

把请求URL的单引号换成反引号，这样变量才会被正确替换成实际传入的值：

export const addNewBeer = (name, country, color, alcoholPercent) => async dispatch => {
  const res = await axios.post(`/api/beers/add/${name}/${country}/${color}/${alcoholPercent}`);
}

更优方案：用请求体传递POST参数 #

虽然上面的修复能解决问题，但POST请求更推荐把参数放在请求体里（而不是URL路径），这样不仅更符合HTTP规范，还能避免参数里的特殊字符（比如酒精百分比的%、名字里的空格）导致的URL编码问题。

客户端修改： #

export const addNewBeer = (name, country, color, alcoholPercent) => async dispatch => {
  const res = await axios.post('/api/beers/add', {
    name,
    country,
    color,
    alcoholPercent
  });
}

后端修改： #

// 先确保你的Express应用配置了JSON解析中间件（这一步很重要！）
app.use(express.json());

app.post('/api/beers/add', requireLogin, (req, res) => {
  // 直接从req.body里解构参数
  const { name, country, color, alcoholPercent } = req.body;
  const beer = new Beer({
    name,
    country,
    color,
    alcoholPercent
  });

  // 别忘了添加保存记录和响应的逻辑
  beer.save()
    .then(createdBeer => res.status(201).json(createdBeer))
    .catch(err => res.status(400).json({ error: '创建啤酒记录失败：' + err.message }));
});

这样调整后，不仅参数能正确传递，代码也更规范、健壮。

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