Actualmente estoy creando un sistema de tienda de suplementos y estoy usando MERN Stack y Axios. No puedo entender por qué la función de eliminación no funciona. Soy nuevo en esto así que por favor echa un vistazo a esto.

PD: El backend del código funciona bien. Lo comprobé con el CARTERO. El problema es con la función onDelete.

back-end

 router.route("/delete/:id").delete(async (req,res) => { let supplementId = req.params.id; await Supplement.findByIdAndDelete(supplementId) .then(() => { res.status(200).send({status: "Supplement Deleted"}) }).catch((err)=>{ console.log(err); res.status(500).send({status: "Error when deleting data", error : err.message}); }); })

Interfaz

Eliminar operación

 const getData = () => { axios.get(`http://localhost:8000/supplement/`) .then((res) => { setSupplements(res.data); }) } const onDelete = (id) => { axios.delete(`/delete/${id}`) .then(() => { alert("Deleted Successfully!") getData(); }) .catch((err) => { alert(err.message); }); }

Botón

 <Button variant="outline-danger" onClick={() => onDelete(supplement._id)}> Delete</Button>