无法使用React更新产品，但可以使用Postman进行更新

Question

我是反应发展的新手。我正在使用Redux更新我的产品。我成功地从 Postman 中更新产品，但我无法从管理面板中进行更新。我认为，由于使用Postman对API进行了测试，并且后端正在工作，因此前端存在问题。请帮助我。

我的产品组件

import { Link } from "react-router-dom";
import "./Product.css";
import { useLocation } from "react-router-dom";
import axios from "axios";
import { Publish } from  '@mui/icons-material';
import { useSelector } from "react-redux";
import { updateProduct } from "../../Redux/apiCalls";
import { useDispatch } from "react-redux";
import { useState } from "react";




const Product = () => {
const location=useLocation();
const productId=location.pathname.split("/")[2];

const product=useSelector(state=>state.product.products.find(product=>product._id===productId))
const dispatch=useDispatch();

console.log(productId);
// const [title, setTitle]=useState("");
// const [desc, setDesc]=useState("");
// const [price, setPrice]=useState("");
// const [inStock, setInStock]=useState("");

const [inputs, setInputs]=useState({})



const handleChange=(e)=>{
    setInputs((prev) => {
        return { ...prev, [e.target.name]: e.target.value };
      });
}
console.log(inputs);
const handleUpdate=async()=>{

 
await updateProduct(productId, inputs , dispatch)


// await axios.put('http://localhost:5000/api/products/`$productId`', inputs, productId)
// .then(response=>console.log(response.data))


    }

    

return ( <>
     <div className="product">
      <div className="productTitleContainer">
        <h1 className="productTitle">Product</h1>
        <Link to="/newproduct">
          <button className="productAddButton">Create</button>
        </Link>
      </div>
      <div className="productTop">
  
          <div className="productTopRight">
              <div className="productInfoTop">
                  {/* <img src={product.img} alt="" className="productInfoImg" /> */}
                  <span className="productName">Product Name</span>
              </div>
              <div className="productInfoBottom">
                  <div className="productInfoItem">
                      <span className="productInfoKey">id:</span>
                      <span className="productInfoValue">{product._id}</span>
                  </div>
                  <div className="productInfoItem">
                      <span className="productInfoKey">sales:</span>
                      <span className="productInfoValue">5123</span>
                  </div>
                  <div className="productInfoItem">
                      <span className="productInfoKey">Price</span>
                      <span className="productInfoValue">{product.price}</span>
                  </div>
                  <div className="productInfoItem">
                      <span className="productInfoKey">in stock:</span>
                      <span className="productInfoValue">{product.inStock}</span>
                  </div>
              </div>
          </div>
      </div>
      <div className="productBottom">
          <form className="productForm">
              <div className="productFormLeft">
                  <label>Product Name</label>
                  <input type="text" placeholder={product.title} name="title"   onChange={handleChange} />
                  <label>Product Description</label>
                  <input type="text" placeholder={product.desc}  name="desc"   onChange={handleChange} />
                  <label>Product Price</label>
                  <input type="text" placeholder={product.price} name="price"    onChange={handleChange}/>
                  
                  <label>In Stock</label>
                  <select name="inStock" id="idStock"
                 onChange={handleChange}
                   > 
                      <option value="true">Yes</option>
                      <option value="false">No</option>
                  </select>
              </div>
              
              <div className="productFormRight">
                  <div className="productUpload">
                      <img src={product.img} alt="" className="productUploadImg" 
                   
                      />
                      <label for="file">
                          <Publish/>
                      </label>
                      <input type="file" id="file" style={{display:"none"}}      />
                  </div>
                  <button className="productButton"  onClick={(e)=>handleUpdate(e.preventDefault())}>Update</button>
              </div>
          </form>
  
      </div>
    </div>
    
    
    </> );
}
 
export default Product;

我的更新组件在redux

    export const updateProduct = async (id, product, dispatch) => {
  dispatch(updateProductStart());
  try {
 const res = await userRequest.put(`/products/${id}`);
   
    dispatch(updateProductSuccess({ id, product }));
  } catch (err) {
    dispatch(updateProductFailure());
  }
};

 updateProductStart: (state) => {
      state.isFetching = true;
      state.error = false;
    },
    updateProductSuccess: (state, action) => {
      state.isFetching = false;
      state.products[
        state.products.findIndex((item) => item._id === action.payload.id)
      ] = action.payload.product;

    },
    updateProductFailure: (state) => {
      state.isFetching = false;
      state.error = true;
    },

我的API

import { ConstructionOutlined } from "@mui/icons-material";
import axios from "axios";

const BASE_URL = "http://localhost:5000/api/";
const user = JSON.parse(localStorage.getItem("persist:root"))?.user;
const currentUser = user && JSON.parse(user).currentUser;
const TOKEN = currentUser?.accessToken;

// const TOKEN = JSON.parse(JSON.parse(localStorage.getItem("persist:root")).user).currentUser.accessToken;

export const publicRequest = axios.create({
  baseURL: BASE_URL,
});

export const userRequest = axios.create({
  baseURL: BASE_URL,
  headers: { token: `Bearer ${TOKEN}` },
});

我的路线

router.put("/:id", verifyTokenAndAdmin, async (req, res) => {
  try {
    const updatedProduct = await Product.findByIdAndUpdate(
      req.params.id,
      {
        $set: req.body,
      },
      { new: true }
    );
res.status(200).json(updatedProduct)
  } catch (err) {
console.log("Can't update")
  }
});

模型

    const mongoose = require("mongoose");

const ProductSchema = new mongoose.Schema(
  {
    title: { type: String, required: true, unique: true },
    desc: { type: String, required: true },
    img: { type: String},
    categories: { type: Array },
    size: { type: Array },
    color: { type: Array },
    price: { type: Number, required: true },
    inStock: { type: Boolean, default: true },
  },
  { timestamps: true }
);

module.exports = mongoose.model("Product", ProductSchema);

Answer 1

如果后端不使用标题访问 - control-allow-Origin发送响应，则浏览器将不允许跨原点请求

：＆lt;当前域名＆gt;
。

因此，在后端，我们需要使用标题访问 - 控制 - 遵守孔：localhost：3000

- ＆gt;在快速项目中：

运行
npm安装cors

更改如下的明确初始化，

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

这将添加一个标题 access-control-allow-Origin： *在处理的每个响应中。此标头表示，允许在任何网站中允许浏览器的请求，

请访问

• https：//expressjs.comcomcom /en/resources/middleware/cors.html