当我使用 fetch 时，我的 .then 代码不工作

Question

所以我在删除页面后尝试重定向，它已从数据库中删除，但它没有将我重定向到我的主页。当我在本地使用 json-server 时它工作正常，但是当我开始使用 Mongoose 时它工作不正常并且没有重定向。

.then 中的代码无效，我在 .then 中尝试了 console.log 但它没有记录

我正在使用猫鼬作为我的数据库

这是我的整个组件：

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
    })
    })

当我使用 fetch 时，我的 .then 代码不工作

When I use fetch my .then code isn't working

javascript

fetch

reactjs