javascript - 我的删除按钮功能有什么问题 - 反应

Question

当我单击删除按钮时，什么也没有发生……任何人都知道出了什么问题。我的数据库已连接并且正在运行！我点击的时候有404错误！

另外，我得到这个： index.js:1 警告：列表中的每个孩子都应该有一个唯一的"key"道具。

检查Allchallenges.

in div(at Allchallenges.js:54) in Allchallenges(created by Context.Consumer) in Route(at App.js:23) in Switch(at App.js:18) in div(at App.js:16) in App(at src/index.js:10) in Router(created by BrowserRouter) in BrowserRouter(at src/index.js:9)

这就是我在 API 方面所拥有的：

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

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

---

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(){
        debugger
        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">

                                <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

标签： javascriptreactjs

Answer 1

您正在打电话axios.delete，但据我所知，您没有任何处理 DELETE 的路线。

你需要在你的路由器中看起来像这样的东西：

//delete challenge
router.delete("/allchallenges/:challengeId", (req,res) => {
 // do something with "req.params.challengeId"
})