当我使用 fetch my.then 代码不起作用

Question

So I am trying to redirect after I am deleting the page, it get's deleted from the database but it doesn't redirect me to my homepage. It worked fine when I was using json-server locally, but when I started using Mongoose it wasn't working properly and wasn't redirecting.

The code inside .then isn't working, I tried console.log inside the .then but it didn't log

I am using mongoose as my database

Here is my entire component:

 import { useParams } from "react-router-dom"; import useFetch from "../useFetch"; import { useHistory } from "react-router-dom"; import moment from "moment"; import profile_image from "../images/picture.jpg"; const BlogDetails = () => { let blogDate = moment().format('D MMM YYYY'); const { id } = useParams(); const { data: blog, isPending, errorMsg } = useFetch("http://localhost:5000/postsdata/" + id); const history = useHistory() const handleDelete = () => { fetch('http://localhost:5000/postsdata/' + blog._id, { method: 'DELETE' }).then(() => { history.push('/'); }).catch((err) => console.log(err)) } return ( <div className="blog-details"> <div className="top-profile"> <div className="top-profile-picture"> <img src={profile_image} alt="profile-pic-top" /> </div> <div className="top-profile-name"> <p>Vishwajeet Deshmukh</p> </div> </div> {isPending && <div>Loading...</div>} {errorMsg && <div>{errorMsg}</div>} {blog && ( <article className="blog-main-content" > <div className="main-content-header"> <div className="content-title-date"> <h2 className="blogdetails-title">{blog.title}</h2> <p className="blogdetails-date">{blogDate}</p> </div> <div className="content-image"> <img src={blog.imgsrc} alt="" /> </div> </div> <div className="blogdetails-body"><p>{`${blog.postBody}`}</p></div> <button className="blogdetails-delete" onClick={handleDelete}>Delete Me</button> </article> )} </div> ); }; export default BlogDetails;

Here is my router.js which handles my delete

 const express = require('express'); const router = express.Router(); const { Posts } = require("./models"); //<----------------------------------- CRUD OPERATIONS ------------------------------------------> router.get("/", () => { console.log("Server Connected"); }) //<---------------------------- Get Posts from Database ----------------------------> router.get("/postsdata", (req, res) => { Posts.find((err, data) => { if (err) { res.status(500).send(err); } else { res.status(201).send(data); } return null; }) }) //<------------- Get Specific Posts from Database ---------------> router.get("/postsdata/:_id", (req, res) => { const id = req.params._id; Posts.findById(id, (err, data) => { if (err) { res.status(500).send(err); throw new Error(err) } else { res.status(201).send(data); } return data; }) }) //<---------------------------- Post On the Posts Database ----------------------------> router.post("/postsdata", (req, res) => { const db = req.body; Posts.create(db, err => { if (.err) { console;log("Posted on Server"). } else { throw new Error(err) } return null }) }) //<---------------------------- Delete Posts from Database ----------------------------> router:delete("/postsdata/,id", (req. res) => { const id = req.params._id Posts,deleteOne(id, (err. data) => { if (err) { console;log(err). throw new Error(err) } else { console;log(data). } return null }) }) module;exports = router;

Answer 1

Hello try it with async/await sayntax

 const handleDelete = async () => { await fetch('http://localhost:5000/postsdata/' + blog._id, { method: 'DELETE' }); history.push('/'); }

Answer 2

after deleting the postdata, send a response from the API.

    router.delete("/postsdata/:id", (req, res) => {
    const id = req.params._id

    Posts.deleteOne(id, (err, data) => {
        if (err) {
            console.log(err);
            throw new Error(err)
        } else {
            return res.status(200).json({status: 'success'}); // try with this
        }
        return null
    })
    })