React.js Express.js Mongoose 更新我的收藏在 react 中不起作用，但在邮递员中它可以成功工作

问：

我正在尝试通过在 React 中获取来更新我的猫鼬集合。当我在 postman 中测试它时，它可以工作，但在 react 中它返回相同的数据而无需更新。我不明白为什么会这样。

这是我的页面路线：

const express = require("express")
    const { default: mongoose } = require("mongoose");
    const router = express.Router();
    const upload = require('multer')();
    const Header = require("../models/header")
    const {createHeader,headerById,readHeader,updateHeader} = require("../controllers/pages")
    const {requireSignin, isAuth,adminById}= require("../controllers/auth")
    
    router.get('/admin/header/:headerId',readHeader)
    router.post("/admin/header/create/:adminId",requireSignin,isAuth ,createHeader)
    router.put("/admin/header/:headerId/:adminId", requireSignin, isAuth,updateHeader)
    
    
    
    router.param("adminId", adminById)
    router.param("headerId",headerById)
    module.exports = router

这是我的头模型：

const mongoose = require("mongoose");
    
    
    const headerSchema = new mongoose.Schema(
      {
        title: {
          type: String,
        },
        brand: {
          type: String,
        },
        description: {
         
            type: String,
         
        },
      },
      { timestamps: true }
    );
    
    module.exports = mongoose.model("Header", headerSchema)

这是我的页面控制器：

 const Header = require("../models/header")
    const {default: mongoose}= require("mongoose")
    const {errorHandler} = require('../helpers/dbErrorHanlder')
    const {
      Types: { ObjectId: ObjectId },
    } = require("mongoose");
    
    exports.createHeader = (req,res)=>{
        console.log(req.file);
        const header = new Header({
          _id: new mongoose.Types.ObjectId(),
          title: req.body.title,
          brand: req.body.brand,
          description: req.body.description,
        
        });
        header
          .save()
          .then((result) => {
            console.log(result)
          
            return res.status(200).json({
                message: "Header info inserted successfully", result
            })
            
          })
          .catch((err) => {
            console.log(err);
            return res.status(400).json({
              error: errorHandler(err),
            });
          });
    
    
    }
    
    
    exports.headerById = (req,res, next,id)=>{
    
      Header.findById(id)
        .exec()
        .then((header)=>{
            req.header = header;
            next()
        })
        .catch((err)=>{
            return res.status(400).json({
                error: "Header not found",
            })
        })
    }
    
    exports.readHeader = (req,res)=>{
        return res.json(req.header)
    }
    
    exports.updateHeader = (req,res,next)=>{
       const headerId = req.params.headerId 
      const updatedTitle = req.body.title;
      const updatedBrand = req.body.brand;
      const updatedDescription = req.body.description;
      
       Header.findByIdAndUpdate(
        {_id: headerId},
        {
            $set:{
                title: updatedTitle,
                brand: updatedBrand,
                description: updatedDescription,
    
            }
        }
      )
    .then((result)=> {
      console.log("Update is called")
      return res.status(200).json({
        message: "Header is updated",result
      })
    })
        .catch((err)=>{
           console.log(err)
        })
      
    }

这是管理员集合：

const mongoose = require("mongoose");
const bcrypt = require("bcrypt"),
  SALT_WORK_FACTOR = 10;

const adminSchema = new mongoose.Schema(
  {
    name: {
      type: String,
      trim: true,
      required: true,
      maxlenghth: 32,
    },
    email: {
      type: String,
      trim: true,
      required: true,
      unique: true,
    },
    password: {
      type: String,
      trim: true,
    },
  },
  { timestamps: true }
);

adminSchema.pre("save", function (next) {
  const admin = this;

  if (!admin.isModified("password")) {
    return next();
  }
  bcrypt.genSalt(SALT_WORK_FACTOR, function (err, salt) {
    if (err) {
      return next(err);
    }

    bcrypt.hash(admin.password, salt, function (err, hash) {
      if (err) {
        return next(err);
      }
      admin.password = hash;
      next();
    });
  });
});

adminSchema.methods.comparedPassword= function(candidatePassword, cb){
    bcrypt.compare(candidatePassword, this.password, function(err, isMatch){
        if(err) {
            return cb(err)
        }
        cb(undefined, isMatch)

    })
}

module.exports = mongoose.model("Admin", adminSchema)

这是身份验证控制器：

const Admin = require('../models/admin')
const bcrypt = require("bcrypt")
const jwt = require('jsonwebtoken')
require('dotenv').config()
const {expressjwt: ejwt} = require('express-jwt')
const {errorHandler} = require('../helpers/dbErrorHanlder')
exports.signup=(req,res)=>{
    console.log("req.body", req.body)

    const admin = new Admin(req.body);
    admin.save().then(()=>{
        res.json({
            admin
        })
    }).catch((err)=>{
        console.log(err)
        return res.status(400).json({
            error : errorHandler(err)
        })
    })
}

exports.signin = async (req,res)=>{
    const {email,password}= req.body
    const admin = await Admin.findOne({email})
      
    if(!admin){
        return res.status(400).json({
            error: "Admin by that email does not exist"
        })
    }else{
        admin.comparedPassword(password, function(err, isMatch){
            if(isMatch && isMatch == true){
                const token= jwt.sign({_id:admin._id}, process.env.JWT_SECRET, {expiresIn:'1h'})
     
                res.cookie('t', token, {expire: new Date() + 9999})
                const {_id, name, email} = admin;
                console.log(token)
             return res.json({token, admin: {_id, email, name}})   
            }else{
                res.status(400).json({
                    error: "Email and password does not macth"
                })
            }
        })
    }

}

exports.signout =(req,res)=>{
    res.clearCookie("t")
    res.status(200).json({
        message: "Signout successfully"
    })

}

exports.requireSignin = ejwt({
    secret:process.env.JWT_SECRET,
    algorithms: ["HS256"],
    userProperty: "auth"
})

exports.isAuth = (req,res,next)=>{
    let admin = req.profile && req.auth && req.profile._id == req.auth._id
    if(!admin){
        return res.status(403).json({
            error: 'Access denied'
        })
    }
    next()
}

exports.adminById =(req,res,next,id)=>{
    Admin.findById(id)
    .exec()
    .then((admin)=>{
        if(!admin){
            return res.status(400).json({
                error: "Admin not found",
            })
        }
        if(admin){
            req.profile = admin;
            next()
        }
    })
    .catch((err)=>{
        console.log(err)
    })
}

这是我的反应核心：

import { API } from "../../config";
    
    export const getHeader = (headerId) => {
      return fetch(`${API}/admin/header/${headerId}`, {
        method: "GET",
      })
        .then((response) => {
          return response.json();
        })
        .catch((err) => console.log(err));
    };
    
    export const updateHeader = (headerId, adminId, token, header) => {
      return fetch(`${API}/admin/header/${headerId}/${adminId}`, {
        method: "PUT",
        headers: {
          Accept: "application/json",
       
          Authorization: `Bearer ${token}`,
        },
        body: header,
      })
        .then((response) => {
          console.log(response)
          return response.json();
        })
        .catch((err) => console.log(err));
    };
    
    export const updateHeaderToken = (admin,next) => {
      if (typeof window !== "undefined"){
        let auth = JSON.parse(localStorage.getItem("jwt"));
        auth.admin = admin;
        localStorage.setItem("jwt", JSON.stringify(auth))
        next()
      }
    }

这是我更新集合的 React 组件：

import React, { useEffect, useState } from "react";
    import { isAuthenticated } from "../../../auth";
    import { getHeader, updateHeader } from "../../apiAdmin";
    import {  useNavigate,useParams } from "react-router-dom";
    const HeaderUpdate = ({match}) => {
      const navigate = useNavigate()
        const headerId ="6550dfa053cffaf7f94c3e56"
        const [values, setValues] = useState({
            title: "",
            brand: "",
            description: "",
          
            loading: false,
            error: "",
            createdHeader: "",
            redirectToProfile: false,
            formData: "",
          });
        
    
        const { admin, token } = isAuthenticated();
        const {
            title,
            brand,
            description,
           
            loading,
            error,
            createdHeader,
            redirectToProfile,
            formData,
          } = values;
    
        const init = headerId => {
            getHeader(headerId).then(data => {
                if (data.error) {
                    setValues({ ...values, error: data.error });
                } else {
                   
                    setValues({
                        ...values,
                        title: data.title,
                        brand: data.brand,
                        description: data.description,
                        formData: new FormData()
                    });
                    
                    
                }
            });
        };
    
        
    
        useEffect(() => {
            init(headerId);
        }, []);
    
        const handleChange = name => event => {
            const value = event.target.value;
       
        formData.set(name, value);
        setValues({ ...values, [name]: value });
        };
    
        const  clickSubmit =  event => {
            event.preventDefault();
            setValues({ ...values, error: '', loading: true });
    
          
           updateHeader(headerId, admin._id, token, formData).then(data => {
                if (data.error) {
                  console.log(data.error)
                    setValues({ ...values, error: data.error });
                } else {
                    setValues({
                        ...values,
                        title: '',
                        brand: '',
                        description: '',
                        loading: false,
                        error: false,
                        redirectToProfile: true,
                        createdHeader: data.title
                    });
                }
            });
        };
    
        const newPostForm = () => (
            <form className="mb-3" onSubmit={clickSubmit}>
               
    
    
                <div className="form-group">
                    <label className="text-muted">Title</label>
                    <input type="text" onChange={handleChange('title')} className="form-control" value={title} />
                </div>
    
                <div className="form-group">
                    <label className="text-muted">Brand</label>
                    <input onChange={handleChange('brand')} type="text" className="form-control" value={brand} />
                </div>
                <div className="form-group">
                    <label className="text-muted">Description</label>
                    <input onChange={handleChange('description')} type="text" className="form-control" value={description} />
                </div>
    
    
                <button className="btn btn-outline-primary">Update Product</button>
            </form>
        );
    
        const showError = () => (
            <div className="alert alert-danger" style={{ display: error ? '' : 'none' }}>
                {error}
            </div>
        );
    
        const showSuccess = () => (
            <div className="alert alert-info" style={{ display: createdHeader ? '' : 'none' }}>
                <h2>{`${createdHeader}`} is updated!</h2>
            </div>
        );
    
        const showLoading = () =>
            loading && (
                <div className="alert alert-success">
                    <h2>Loading...</h2>
                </div>
            );
    
        const redirectUser = () => {
            if (redirectToProfile) {
                if (!error) {
                    return navigate('/admin/dashboard');
                }
            }
        };
    
        return (
        <div className="col">
            
             {showLoading()}
                        {showSuccess()}
                        {showError()}
                        {newPostForm()}
                        {redirectUser()}
               
        
                        </div>
            
        );
    };
    
    export default HeaderUpdate;

我安慰一个响应，它似乎工作正常;但是，集合根本不会更改，没有任何错误