试图让我的删除按钮在 REACT 中工作

Posted 2023-03-10

【中文标题】试图让我的删除按钮在 REACT 中工作

【英文标题】：Trying to make my delete button working in REACT

【发布时间】：2020-08-26 00:27:57

【问题描述】：

有人能在我的代码中找到错误吗？我正在尝试使删除按钮起作用，以删除已单击的特定挑战。

控制台中的错误：

xhr.js:178 DELETE http://localhost:3000/allchallenges/5eb4398f2650390017030bcf 404（未找到）

---

具有删除按钮的前端组件

import React from 'react'
import DefaultLayout from "../layout/Default"
import Challengebox from '../components/Challengebox'
import axios from "axios";

class Allchallenges extends React.Component 
    constructor() 
        super()

        this.state = 
           challenges: []
        

        this.onDelete=this.onDelete.bind(this)
    

    componentDidMount()
        axios(
            method: "GET",
            url: `$process.env.REACT_APP_API_BASE/allchallenges`,
            withCredentials: true
        )
        .then(response => 
            console.log(response)
            let challengeslist = response.data;
            this.setState(challenges: challengeslist)
        )
        .catch(error => 
            console.log("You've made an error charles: ",error)
        )
    

    onDelete(challengeId)
        axios
        .delete(`$process.env.REACT_APP_API_BASE/allchallenges/$challengeId`)
        .then(response => 
            this.props.history.push("/allchallenges")
        )
        .catch(err => console.log(err))
    

    render() 
        return (
            <DefaultLayout>
                <div className="challengeoverviewlist">
                    <h1>All challenges</h1>   

                    <div className="challengeboxes">

                        
                    this.state.challenges.map(challenge => 
                        (
                            <div className="totalbox" key=challenge._id>

                                <Challengebox 
                                    key=challenge._id 
                                    id=challenge._id 
                                    title=challenge.title 
                                    description=challenge.description
                                />

                                <button onClick=() => this.onDelete(challenge._id)>
                                    Delete
                                </button>

                            </div>
                        ))                                                                      
                    

                    </div>

                </div>    
            </DefaultLayout>
        )
    


export default Allchallenges

---

我的 api：

//request challenges
router.get("/allchallenges", (req,res) => 
  Challenge
  .find()
  .then(response => 
    res.json(response)
  )
  .catch(error => 
    res.json(error)
  )
)

//delete challenge
router.delete("/allchallenges", (req,res) => 
  Challenge
  .find()
  .then(response => 
    res.json(response)
  )
  .catch(error => 
    res.json(error)
  )
)

【参考方案1】：

xhr.js:178 删除 http://localhost:3000/allchallenges/5eb4398f2650390017030bcf404（不 找到）

404 : not found - 错误明确指出该路径的 api 不存在

那么，您的快速 API 路由问题：

改变这个：

router.delete("/allchallenges",

收件人：

router.delete("/allchallenges/:id",

注意：您可以使用req.params 访问参数

【讨论】：

谢谢我改了。这是我现在得到的错误： Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL at dispatchXhrRequest (localhost:3001/static/js/0.chunk.js:318:13) at new Promise () at xhrAdapter (localhost:3001/static/js/0.chunk.js:301:10)在 dispatchRequest (localhost:3001/static/js/0.chunk.js:924:10)

@CharlieVdb，所以你的问题错误解决了，现在是反应相关的东西

process.env.REACT_APP_API_BASE的值是多少

什么意思？知道错误可能是什么吗？

@CharlieVdb，只要我知道当您的 URL 中缺少 http:// 或 https:// 时会发生这种情况，请检查，参考检查：***.com/questions/42461174/…

【参考方案2】：

也许你需要添加一个路由参数。

router.delete("/allchallenges/:id", (req,res) => 
  Challenge
  .find()
  .then(response => 
    res.json(response)
  )
  .catch(error => 
    res.json(error)
  )
)

Also if you want to delete object and you are using mongoose you have to use Model.findByIdAndDelete

【讨论】：

谢谢我加了参数，把find()改成了findByIdAndDelete()，但还是报错：加载资源失败：服务器响应状态为500（内部服务器错误）+未捕获（承诺中）DOMException：无法在'XMLHttpRequest'上执行'open'：dispatchRequest（localhost:3001/static/js/0.chunk.js:924:10）的xhrAdapter（localhost:3001/static/js/0.chunk.js:301:10）的新Promise（）的dispatchXhrRequest（localhost:3001/static/js/0.chunk.js:318:13）的无效URL