尽管发送正常，但无法删除数据库中的数据

Question

从我的前端我可以 post 数据进入我的数据库，使用相同的方法我无法从我的数据库中删除数据但是，尽管使用 html 表单（而不是的反应）和相同的后端。

我的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;

在我的 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('/');
  })
})

我的想法是，我想在输入栏中输入 id 并以这种方式将其删除。我可以用 addNew 发送数据，但 deleteItem 什么也没做。我还要补充说，对于这两个功能，我都在控制台 GET http://localhost:3001/ 404 (Not Found) 中获取，但是 addNew 仍然将项目添加到数据库中。

这就是我的数据，如果有帮助的话：data image

Answer 1

我认为您的问题是当您设置 deleteItem 时调用 Id“blogTitle”

const deleteItem = {
  blogTitle: Item.id
}

然后当您创建查询以删除您试图在服务器上获取“req.body.id”时。

const myquery = { _id: new mongodb.ObjectId(String(req.body.id)) }

我认为您需要更改一个以匹配另一个。这样你就不会试图删除未定义的。不确定是否仍需要转换为字符串。

将客户端代码更改为：

const deleteItem = {
  id: Item.id
}

尽管发送正常，但无法删除数据库中的数据

Cannot delete data in database, despite sending just fine

javascript

node.js

express

reactjs