當我使用 fetch my.then 代碼不起作用

Question

因此，我在刪除頁面后嘗試重定向，它已從數據庫中刪除，但不會將我重定向到我的主頁。 當我在本地使用 json-server 時它工作正常，但是當我開始使用 Mongoose 時它不能正常工作並且沒有重定向。

.then中的代碼不起作用，我在.then中嘗試了 console.log 但它沒有記錄

我使用 mongoose 作為我的數據庫

這是我的整個組件：

 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;

這是我的router.js處理我的刪除

 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

你好用 async/await sayntax 試試

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

Answer 2

刪除 postdata 后，從 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
    })
    })