React - delete request come with error code 404

Question

I've an issue while i'm trying to delete a driver from mySQL db. Calling my function and passing mapped id (it's working):

<button id="deleteRent" onClick={DeleteVehicles.bind(vehicle.id)}>Delete</button>

Here is my react code:

const DeleteVehicles = (CarId) => {
        Axios.delete(`http://localhost:3001/vehicleDelete/${CarId}`)
            .then((response) => {
                if (response) {
                    console.log(response)
                    alert("Sikeres Törlés")
                    navigate("/admin");
                }
                else {
                    console.log("törlési hiba")
                }
            })
    }

and here is my node express request:

app.delete('/vehicleDelete/:CarId'), async (req, res) => {
    db.query("DELETE FROM products WHERE id = ?", req.params.CarId,
        (err, result) => {
            console.log(err)
            console.log(result)
            if (result) {
                res.send(result);
            }
        })
}

any idea?

lpizzinidev · Accepted Answer · 2022-03-04 08:17:33Z

1

axios should be lowercased:

axios.delete(`http://localhost:3001/vehicleDelete/${CarId}`)

Be careful with the closing parentheses on the express code:

app.delete('/vehicleDelete/:CarId', async (req, res) => {
    db.query("DELETE FROM products WHERE id = ?", req.params.CarId, (err, result) => {
        if (err) return res.status(500).send('Error')
        res.status(200).send(result);
    })
})

answered Mar 4, 2022 at 8:17

lpizzinidev

13.3k2 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Apoorva Chikara · Accepted Answer · 2022-03-04 08:14:38Z

You should run this:

app.delete('/vehicleDelete/:CarId'), (req, res) => {
   // make sure your are getting CarId that exists
   // and then you delete it

    db.query(`DELETE FROM products WHERE id = ${req.params.CarId}`,
        (err, result) => {
            console.log(err)
            console.log(result)
            if (result) {
                res.send(result);
            }
        })
}

Also, you don't need to add async as your not using await for the query. The result gives you an object that might look like this:

{
  fieldCount: 0,
  affectedRows: 1,
  insertId: 0,
  serverStatus: 34,
  warningCount: 0,
  message: '',
  protocol41: true,
  changedRows: 0
}

Now, when you say you receive the 404 status code, it means that you don't have the route on which the request is made. So, http://localhost:3001/vehicleDelete/${CarId} you need to register the route properly at the server.

You should add the catch blocks with Promises, it is recommended practice.

const DeleteVehicles = (CarId) => {
        Axios.delete(`http://localhost:3001/vehicleDelete/${CarId}`)
            .then((response) => {
                if (response) {
                    console.log(response)
                    alert("Sikeres Törlés")
                    navigate("/admin");
                }
                else {
                    console.log("törlési hiba")
                }
            }).catch(console.log);
    }

Collectives™ on Stack Overflow

React - delete request come with error code 404

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related