axios.put()无法更新SQL Server数据库问题求助

连接Node.js后端的React页面，通过axios.put()提交用户输入更新数据库时，前端返回200 OK但数据库仅被更新为NULL；使用Postman发送相同请求却能正常更新，控制台无报错且输出看似正常。

前端代码（App.js） #

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import './App.css';

function App() {

  const [orderNumber, setOrderNumber] = useState(0);
  const [input, setInput] = useState('');
  const [data, setData] = useState([]);

  const url = `http://localhost:8080/api/event/${orderNumber}`
  useEffect(() => {
    axios.get(url)
    .then(response => {
      setData(response.data)
      console.log(response.data)
    })
    .catch((err) => console.log(err));
  }, [url]);

  const handleChange = event => {
    setOrderNumber(event.target.value);
    //console.log(event.target.value);
  };

  const handleClick = event => {
    event.preventDefault();
    console.log(orderNumber);
  }

  const handleUpdate = event => {
    event.preventDefault();
    console.log(`Event ID : ${event.target.id}`);
    console.log(input);
    axios.put(`http://localhost:8080/api/event/${event.target.id}` , input)
      .then((response) => {
        if (response.status === 200) {
          alert("Comment Successfully Updated!")
        } else Promise.reject();
      })
      .catch((err) => alert(`Something went wrong : ${err}`));
    }

  return(
    <div>
        <br></br>
        <br></br>
        Order Number: <input placeholder="Order Number" type="text" id="message" name="message" onChange={handleChange} value={orderNumber} autoComplete="off" />
        <button onClick={handleClick}>Search</button>
        <br></br>
        <br></br>
                {data.map((alldata) => (
                    <div key={alldata.ID}> 
                    <input id={alldata.ID} defaultValue={alldata.cmt} onChange={e => setInput(e.target.value)}/> 
                    <button id={alldata.ID} onClick={handleUpdate}>Update</button>
                    </div>
                ))} 
                
    </div>
)
}

export default App;

解决方案 #

1. 单一输入状态导致多输入框数据冲突 #

当前所有输入框共享同一个input状态，当页面渲染多条数据时，编辑A输入框后再点击B输入框的更新按钮，input值可能不是B的内容，甚至为空，导致后端接收空值更新为NULL。

修复：给每条数据维护独立的输入状态，修改如下：

// 初始化数据时添加独立输入字段
useEffect(() => {
  axios.get(url)
  .then(response => {
    const formattedData = response.data.map(item => ({
      ...item,
      inputValue: item.cmt // 用原评论值初始化输入框
    }));
    setData(formattedData);
  })
  .catch((err) => console.log(err));
}, [url]);

// 针对具体ID更新输入值
const handleInputChange = (id, value) => {
  setData(prevData => prevData.map(item => 
    item.ID === id ? {...item, inputValue: value} : item
  ));
}

2. PUT请求数据格式不匹配后端要求 #

Postman请求正常说明后端期望接收JSON对象格式，但前端直接传递字符串input，后端无法解析对应字段，导致更新为NULL。

修复：将请求数据包装成后端预期的JSON结构（假设后端接收{cmt: "新内容"}格式），同时优化更新函数：

const handleUpdate = (id, inputValue) => {
  axios.put(`http://localhost:8080/api/event/${id}`, { cmt: inputValue })
    .then((response) => {
      if (response.status === 200) {
        alert("Comment Successfully Updated!");
        // 更新本地状态，避免重新请求
        setData(prevData => prevData.map(item => 
          item.ID === id ? {...item, cmt: inputValue} : item
        ));
      } else Promise.reject();
    })
    .catch((err) => alert(`Something went wrong : ${err}`));
}

3. 修正渲染部分的输入框与按钮 #

替换原渲染逻辑，绑定独立状态并直接传递ID给更新函数，避免event.target的歧义问题：

{data.map((alldata) => (
  <div key={alldata.ID}> 
    <input 
      id={alldata.ID} 
      value={alldata.inputValue} 
      onChange={e => handleInputChange(alldata.ID, e.target.value)}
    /> 
    <button 
      onClick={() => handleUpdate(alldata.ID, alldata.inputValue)}
    >Update</button>
  </div>
))}

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