I've trying to edit an entry of the data fetched from mysql and want to reflect if back in mysql db. For this im using post method of Axios. But im getting the following error when i try to edit the data and see for changes.

TypeError: Cannot read properties of undefined (reading 'id')
    at C:\Users\Rahul01\Desktop\DBMS-PROJECT\BusTicketManagementSystem\server\index.js:123:23
    at Layer.handle [as handle_request] (C:\Users\Rahul01\Desktop\DBMS-PROJECT\BusTicketManagementSystem\server\node_modules\express\lib\router\layer.js:95:5)

Here are the Codes

1.index.js

app.post('/admin/updatebus',(res,req)=>{
    const id=req.body.id
    const name=req.body.newbusname
    const fromcity=req.body.newfromstation
    const tocity=req.body.newtostation
    const capacity=req.body.newcapacity 1

    db.query("UPDATE bus SET busname=?,fromcity=?,tocity=?,capacity=? WHERE busid=? ",[name,fromcity,tocity,capacity,id 1],(err,result)=>{
        if(err)
        {
            console.log(err);
            res.send({op:f})
        }
        else
        {
            res.send({op:s});
        }
    })
})

2.Editbus.js

import Axios from 'axios'
import React, { useState } from 'react'
import { useParams } from 'react-router-dom'

export default function Editbus() {

    const [newbusname, setnewbusname] = useState('')
    const [newfromstation, setnewfromstation] = useState('')
    const [newtostation, setnewtostation] = useState('')
    const [newcapacity, setnewcapacity] = useState(0)
    const {id}=useParams();

    const handlesave=(e)=>{
        // alert(key)
        alert('Name' newbusname "\n From:" newfromstation "\nTo: " newtostation "\n Capacity: " newcapacity)
    
        Axios.post('http://localhost:3001/admin/updatebus',{
            newbusname:newbusname,
            newfromstation:newfromstation,
            newtostation:newtostation,
            newcapacity:newcapacity,
            id:parseInt(id)

        }).then((resp)=>{
            if(resp.data.op==='s')
            {
                alert('Updated')
            }
            else
            {
                alert('Not Updated')
            }

        })
        e.preventDefault()

    }
  return (
    <>
    <div >
        <div >
            <form >
                <span >
                    Edit Bus {id}
                </span>

                <div  data-validate="Name is required">
                    
                    <input  type="text"  name="name" onChange={e=>setnewbusname(e.target.value)} placeholder="New Bus Name" required/>
                    <span ></span>
                </div>

                <div  data-validate = "Valid email is required: [email protected]">
                    
                    <input  type="text" name="email" onChange={e=>setnewfromstation(e.target.value)}   placeholder="From Bus Stop" required/>
                    <span ></span>
                </div>
        <div  data-validate = "Valid email is required: [email protected]">
                    
                    <input  type="text" name="email" onChange={e=>setnewtostation(e.target.value)}   placeholder="To Bus Stop" required/>
                    <span ></span>
                </div>

        <div  data-validate = "Valid email is required: [email protected]">
                    
                    <input  type="number" name="email" onChange={e=>setnewcapacity(e.target.value)}  placeholder="New Capacity" required/>
                    <span ></span>
                </div>

            

                


        <button  onClick={handlesave}>Update</button>
            </form>
        </div>
    </div>



    <div id="dropDownSelect1"></div>

    </>
  )
}

3. In App.js <Route exact path="/admin/editbus/:id" element={}>

CodePudding user response：

It should be (req, res) instead of (res,req) in the .post handler.

Corrected Code:

app.post('/admin/updatebus',(req,res)=>{}

First Parameter should be for Request and second one for the Response.

Tip: Include type='button' in the Submit Button so that the HTML form doesn't gets submitted.

<button type="button" onClick={handlesave}>Update</button>

CodePudding user response：

The problem is that you have a null on your id. You should check if there is a value on your req.body I think