axios.put() function does not update SQL Server Database

Glenn94 0
Viewed 22

I have a simple react page connected with a Node.js backend. Now after I've connected the React front end page's user inputs with the axios.put() function to update it does not update in the database neither give me any error. I'm logging all outputs to the console and to me all seems like working good.

My code : 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;

Following figure is what data I'm sending via POSTMAN request and it's sending me back 200OK response while the database really get's updated. enter image description here

And this is what I'm sending via the front-end user inputs while no errors popped up and the same 200OK response getting from Network tab in browser. But here the database only get's updated as "NULL" no matter what is the user input is. enter image description here

enter image description here

axios reactjs node.js
1 Answers

Notice the data you send in Postman:

{
  "cmt": "Testing Comment"
}

But where is this cmt property in your JavaScript code? This is where you're sending the request to the server:

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

And input is just a string. So you're not sending an object at all, you're just sending a string.

Your server-side code should probably be validating input before making data changes and returning a successful response. So I'd argue that this is a problem in both the client-side code and the server-side code.

But if you're intending to send an object, send an object:

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