使用 React、NodeJS 和 Postgres：无法在没有 404 的情况下删除答案

【问题标题】：Using React, NodeJS, and Postgres: Having trouble being able to delete without getting a 404使用 React、NodeJS 和 Postgres：无法在没有 404 的情况下删除
【发布时间】：2020-01-27 14:48:29
【问题描述】：

我正在尝试创建一个简单的 CRUD 应用程序，该应用程序将事物列表发布到 Postgres 数据库。我无法从应用程序中删除，因为我不断收到 404 错误。我认为我在后端做错了什么，因为我什至无法使用 Postman 删除。

deletion.js // 删除路由器

router.delete('/',(req,res)=>{
    var item = req.params.index;
    console.log(`req.params.index is ${req.params.index}`)


    let deletion = `DELETE FROM tnotesapi1.tearecords
       WHERE primary_key = ${item}`


    client.query(deletion, (res,err)=>{
        if(err){
            console.error(`Record Query error, ${err.stack}`)

        }else{
            console.log('Item has been deleted from dB')
            res.send()
        }
    })


})

服务器的路由器处理程序

app.delete('/api/delete/:index',deleteRouter)

另外，前端的axios怎么用？

tearecord.delete(`delete/`,{params:index})
        .then(res => {
            console.log();
        })

【问题讨论】：

标签： node.js reactjs postgresql express

【解决方案1】：

? 获得404 ERROR 的唯一原因是找不到您的路线。

为什么找不到您的路线？这是因为在您的处理程序中：server.js 或 app.js，您设置了这样的删除方法：

app.delete('/api/delete/:index',deleteRouter)

? 你不应该这样做，因为你曾经在 deletion.js 中设置了 delete 方法。所以，你只需要做这样的事情：

app.use('/api/delete/:index',deleteRouter)

以上代码?仅作示例。如果这让您感到困惑，您可以查看下面的完整代码。

?‍?你可以像下面这段代码一样做?：

deletion.js

router.delete('/:index',(req,res)=>{
    var item = req.params.index;
    console.log(`req.params.index is ${req.params.index}`)


    let deletion = `DELETE FROM tnotesapi1.tearecords
       WHERE primary_key = ${item}`


    client.query(deletion, (res,err)=>{
        if(err){
            console.error(`Record Query error, ${err.stack}`)

        }else{
            console.log('Item has been deleted from dB')
            res.send()
        }
    })
})

? 在上面的代码?中，你必须添加一个params。因为您使用的是index，所以您必须将index 添加为params。

服务器/app.js

app.use('/api/delete', deleteRouter)

? 现在，在您的 server 或 app 处理程序中，您不必再次使用 delete。因为您在deletion.js 中使用它。

前端：使用axios

// change with your endpoint
const endPoint = 'http://localhost:3000/api/delete/' + index;
axios.delete(endpoint)
  .then(response => {
      console.log(response.data);
  }).catch(ex => {
    console.log(ex.data);
  })

? 更新：使用 Fetch。

如果您使用的是 React，那么您可以在其中使用fetch，而无需使用axios。

您可以使用下面的示例代码：

async handleDelete(index) {
  try {
    // change the endpoint with yours
    const endpoint =  'http://localhost:3000/api/delete/' + index;
    const result = await fetch( endpoint, { method: 'DELETE' });
    const json = await result.json();
    console.log(json);
    // do some stuff here: set state or some stuff you want
  } catch(ex) {
    console.log(ex);
  }
}

? 上面的代码? 示例，如何在 react 中使用 fetch 发送 delete 请求到您的后端。

希望对你有帮助?。

【讨论】：

感谢您的解释。我帮助解决了我的问题。

【解决方案2】：

在您的 axios 请求中，通过 api 调用直接将索引作为参数传递

tearecord.delete(`/api/delete/${index}`)  // pass your index directly 
  .then(res => {
            console.log();
        })

后端：

router.delete('/api/delete/:index',(req,res)=>{ // put here index as params in backend 
    var item = req.params.index;

【讨论】：