axios.put()函数不更新SQL Server数据库

nfzehxib  于 2022-11-05  发布在  iOS
关注(0)|答案(1)|浏览(157)

我有一个简单的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”。

k5ifujac

k5ifujac1#

请注意您在Postman中发送的数据:

{
  "cmt": "Testing Comment"
}

但是cmt属性在JavaScript代码中的位置是什么呢?这是向服务器发送请求的位置:

axios.put(`http://localhost:8080/api/event/${event.target.id}` , input)

input只是一个字符串,所以你根本就不是在发送一个对象,你只是在发送一个字符串。
您的服务器端代码 * 可能 * 应该在进行数据更改并返回成功响应之前验证输入。因此,我认为这是 * 客户端代码 * 和 * 服务器端代码的问题。
但是如果你打算发送一个 object,发送一个object:

axios.put(`http://localhost:8080/api/event/${event.target.id}`, { cmt: input })

相关问题