React表单提交异常：仅review字段传值成功，user_id/coffee_id丢失

核心问题 #

你的input元素id属性和state里的字段名不匹配：

• state中用户ID字段是user_id，但input的id写的是userId
• state中咖啡ID字段是coffee_id，但input的id写的是coffeeId

当handle函数执行newdata[e.target.id] = e.target.value时，实际是给newdata新增了userId和coffeeId两个字段，而非更新state原本的user_id和coffee_id。提交时这两个字段仍为初始空字符串，后端接收不到有效数据就返回了null。

修复方案 #

有两种可选修复方式：

方式一：统一命名规则 #

修改input的id，和state字段名保持一致，同时修正React属性的驼峰写法（defaultvalue改为defaultValue）：

<input onChange={(e)=>handle(e)} id="user_id" defaultValue={data.user_id} placeholder="userId" type="text"></input>
<input onChange={(e)=>handle(e)} id="coffee_id" defaultValue={data.coffee_id} placeholder="coffeeId" type="text"></input>

方式二：在handle函数中映射字段名 #

如果不想修改input的id，可以在handle函数里做字段名的映射：

function handle(e){
  const newdata={...data}
  // 把input的id映射为state对应的字段名
  const fieldName = e.target.id === 'userId' ? 'user_id' : 
                    e.target.id === 'coffeeId' ? 'coffee_id' : 
                    e.target.id;
  newdata[fieldName] = e.target.value
  setData(newdata)
}

额外调试建议 #

• React状态更新是异步的，handle里直接console.log(data)看不到最新状态，可通过useEffect监听data变化来打印：

  useEffect(() => {
    console.log('当前状态:', data)
  }, [data])
  

• 提交前先打印data确认所有字段都有值，再发送请求，方便快速定位问题

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