React组件中Axios Post请求参数失效问题求助

核心问题1：参数过度序列化导致格式错误 #

你当前的代码对参数做了双重JSON序列化：不仅外层用JSON.stringify包裹，内部每个字段又单独JSON.stringify，这会导致后端收到的参数是嵌套的字符串，完全不符合接口预期（Postman测试时是直接传正常JSON对象）。

Axios的post方法默认会自动将JS对象序列化为JSON，并设置正确的Content-Type: application/json请求头，不需要手动调用JSON.stringify。

核心问题2：输入值类型不匹配 #

输入框的value是字符串类型，你直接将order[itemID]作为quantity传递，后端Golang如果期望接收数字类型，就会解析失败返回400。

核心问题3：输入框未绑定value，状态与视图不一致 #

你的输入框没有绑定value属性，虽然onChange会更新order状态，但输入框的显示值可能和order中的值不同步，导致后续逻辑判断或参数传递出错。

具体修复步骤 #

1. 修正参数传递逻辑 #

把过度序列化的代码替换为直接传递JS对象，并将quantity转为数字类型：

// 替换原来的param定义
let param = {
  userrefer: userID,
  productrefer: itemID,
  quantity: Number(order[itemID]) // 转成数字类型匹配后端要求
};

// Axios请求直接传param，不需要JSON.stringify
await axios
  .post(`http://127.0.0.1:3000/api/orders`, param)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log("err", err);
  });

2. 给输入框绑定value属性 #

确保输入框的显示值和order状态同步，修改循环中的输入框：

<input 
  type="number" 
  id={`qty-${element.id}`} // 避免循环生成重复id
  name="qty"
  value={order[element.id] || 0} // 绑定value，默认显示0
  onChange={(e) => handleOrderChange(e, element.id)}
  min="0"
  max={element.qty} 
/>

3. 优化handleOrderChange，确保值为数字类型 #

在更新order状态时，直接把输入值转为数字，避免后续处理麻烦：

const handleOrderChange = (event, itemID) => {
  const value = Number(event.target.value); // 转成数字类型存储
  setOrder({ ...order, [itemID]: value });
};

4. 验证参数类型匹配后端要求 #

确认userID和itemID的类型与后端接口一致：

• 如果后端期望userrefer是数字，而userID是字符串，需要转为Number(userID)
• 如果itemID是字符串类型（比如从API返回的是字符串id），后端期望数字的话也要转类型

额外优化建议 #

• 循环渲染的元素需要添加唯一key属性，避免React警告：

{instruments.map((element) => {
  return (
    <div key={element.id}> {/* 添加唯一key */}
      <Card name={element.name} img={element.img} price={element.price} qty={element.qty} description={element.description} />
      <input 
        type="number" 
        id={`qty-${element.id}`}
        name="qty"
        value={order[element.id] || 0}
        onChange={(e) => handleOrderChange(e, element.id)}
        min="0"
        max={element.qty} 
      />
      <button onClick={(e) => handleBuy(e, element.id, element.qty)}>Buy</button>
    </div>
  )
})}

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