我有一个简单的react页面连接到一个Node.js
后端。现在,当我连接了React前端页面的用户输入和axios.put()
函数来更新它后,它不会在数据库中更新,也不会给予我任何错误。我正在将所有输出记录到控制台,对我来说,一切似乎都工作得很好。
我的代码: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;
下图是我通过POSTMAN请求发送的数据,它在数据库真正得到更新时向我发送回200OK响应。
这是我通过前端用户输入发送的,同时没有弹出错误,并且从浏览器的网络选项卡中得到相同的200OK响应。但在这里,无论用户输入是什么,数据库都只更新为“NULL”。
1条答案
按热度按时间k5ifujac1#
请注意您在Postman中发送的数据:
但是
cmt
属性在JavaScript代码中的位置是什么呢?这是向服务器发送请求的位置:而
input
只是一个字符串,所以你根本就不是在发送一个对象,你只是在发送一个字符串。您的服务器端代码 * 可能 * 应该在进行数据更改并返回成功响应之前验证输入。因此,我认为这是 * 客户端代码 * 和 * 服务器端代码的问题。
但是如果你打算发送一个 object,发送一个object: