From my front end I am able to post data into my database, using the same method I am unable to delete data from my database however, despite this working with html forms (instead of react) and the same backend.
My app.js:
import './App.css';
import axios from 'axios';
import React, { useState, useEffect } from 'react'
function App() {
const [Item, setItem] = useState(
{
title: '',
description: '',
id: ''
}
)
//get user input, and send to mongod db
function addNew(event) {
event.preventDefault();
const newItem = {
blogTitle: Item.title,
blogBody: Item.description
}
axios.post('http://localhost:3001/api/addNew', newItem);
}
function handleChange(event) {
let {name, value} = event.target;
setItem(prevInput => {
return(
{
...prevInput,
[name]: value,
}
);
});
// console.log(Item);
}
//delete
function deleteOne(event) {
event.preventDefault();
const deleteItem = {
id: Item.id
}
console.log(deleteItem)
axios.post('http://localhost:3001/api/delete', deleteItem);
}
return (
<div className="App">
<input onChange={handleChange} name="title" value={Item.title} placeholder="title"></input>
<input onChange={handleChange} name="description" value={Item.description} placeholder="description"></input>
<button onClick={addNew}>Submit</button>
<br />
<input onChange={handleChange} name='id' value={Item.id} placeholder='delete id'></input>
<button onClick={deleteOne} >delete</button>
</div>
)}
export default App;
in my server.js:
app.post('/api/addNew', (req, res) => {
res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept'
);
db.collection('miscData').insertOne(req.body, (err, result) => {
if (err) console.log(err)
res.redirect('/');
})
})
app.delete('/api/delete', (req, res) => {
res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept'
);
const myquery = { _id: new mongodb.ObjectId(String(req.body.id)) }
db.collection('miscData').deleteOne(myquery, (err, obj) => {
if (err) throw err;
console.log("1 document deleted");
res.redirect('/');
})
})
The idea is that I want to type in the id in the input bar and delete it that way. I am able to send the data with addNew
but deleteItem
does not do anything. Also I will add that for both of these function I am getting in console GET http://localhost:3001/ 404 (Not Found)
, however addNew
still gets items added to the database despite this.
This is what my data looks like if that helps: data image
CodePudding user response:
I think your problems is when you set the deleteItem your calling the Id "blogTitle"
const deleteItem = {
blogTitle: Item.id
}
Then when you create your query to delete your trying to get "req.body.id" on the server.
const myquery = { _id: new mongodb.ObjectId(String(req.body.id)) }
You need to change one to match the other I think. So that you don't try to delete undefined. Not sure if you still need to convert to string.
change client code to:
const deleteItem = {
id: Item.id
}