[英]API works fine in postman but not in frontend part of react
I am doing a project(ecommerce project) in MERN stack for practice.我正在 MERN 堆栈中做一个项目(电子商务项目)以进行练习。 I am fairly new to Mern stack.
我对 Mern 堆栈相当陌生。 Everything works fine except for "UpdateCategory" in frontend section.
除了前端部分的“UpdateCategory”外,一切正常。 It works perfect in POSTMAN.
它在 POSTMAN 中完美运行。 In frontend part it is giving error.
在前端部分它给出了错误。
I have attached the entire code related to updateCategory section including the backend part and adminapi call for reference.我附上了与 updateCategory 部分相关的整个代码,包括后端部分和 adminapi 调用以供参考。
Frontend side "updateCategory" code is attached just below the adminapicall below, please look at that and try to figure out whats going wrong.前端“updateCategory”代码附加在下面的 adminapicall 下方,请查看该代码并尝试找出问题所在。
Have a look at this screenshot, after clicking the update button, only the error function is working.看看这个截图,点击更新按钮后,只有错误 function 工作正常。
https://i.stack.imgur.com/ApgVu.png https://i.stack.imgur.com/ApgVu.png
----------------------------------------------adminapicall----------------------------------------------- ----------------------------------------------adminapicall--- ------------------------------------------
import { API } from "../../backend";
//category calls
export const createCategory = (userId, token, category) => {
return fetch(`${API}/category/create/${userId}`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Bearer ${token}`
},
body: JSON.stringify(category)
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//get a category
export const getCategory = categoryId => {
return fetch(`${API}/category/${categoryId}`, {
method: "GET"
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//get all categories
export const getCategories = () => {
return fetch(`${API}/categories`, {
method: "GET"
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//delete a category
export const deleteCategory = (categoryId, userId, token) => {
return fetch(`${API}/category/${categoryId}/${userId}`, {
method: "DELETE",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`
}
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//update a category
export const updateCategory = (categoryId, userId, token, category) => {
return fetch(`${API}/category/${categoryId}/${userId}`, {
method: "PUT",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`
},
body: category
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//products calls
//create a product
export const createaProduct = (userId, token, product) => {
return fetch(`${API}/product/create/${userId}`, {
method: "POST",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`
},
body: product
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//get all products
export const getProducts = () => {
return fetch(`${API}/products`, {
method: "GET"
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//delete a product
export const deleteProduct = (productId, userId, token) => {
return fetch(`${API}/product/${productId}/${userId}`, {
method: "DELETE",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`
}
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//get a product
export const getProduct = productId => {
return fetch(`${API}/product/${productId}`, {
method: "GET"
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//update a product
export const updateProduct = (productId, userId, token, product) => {
return fetch(`${API}/product/${productId}/${userId}`, {
method: "PUT",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`
},
body: product
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
--------------------------------------------UpdateCategory----------------------------------------------- --------------------------------------------UpdateCategory----- ------------------------------------------
import React, { useState,useEffect } from "react";
import Base from "../core/Base";
import { isAutheticated } from "../auth/helper";
import { Link } from "react-router-dom";
import { getCategory, updateCategory } from "./helper/adminapicall";
const UpdateCategory = ({match}) => {
const [name, setName] = useState("");
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false);
const { user, token } = isAutheticated();
const preload = categoryId => {
getCategory(categoryId).then(data =>{
if(data.error) {
console.log(data.error);
}else{
setName(data.name)
}
});
};
useEffect(() => {
preload(match.params.categoryId);
}, []);
const goBack = () => (
<div className="mt-5">
<Link className="btn btn-sm btn-success mb-3" to="/admin/dashboard">
Admin Home
</Link>
</div>
);
const handleChange = event => {
setError("");
setName(event.target.value);
};
const onSubmit = event => {
event.preventDefault();
setError("");
setSuccess(false);
//backend request fired
updateCategory(match.params.categoryId, user._id, token, { name }).then(data => {
if (data.error) {
setError(true);
} else {
setError("");
setSuccess(true);
setName("");
}
});
};
const successMessage = () => {
if (success) {
return <h4 className="text-success">Category created successfully</h4>;
}
};
const warningMessage = () =>{
if(error){
return <h4 className="text-danger">Failed to update</h4>
}
};
const myCategoryForm = () =>(
<form>
<div className="form-group">
<p className="lead">Enter the category</p>
<input
type="text"
className="form-control my-3"
onChange={handleChange}
value={name}
autoFocus
required
placeholder="For Ex.Summer"
/>
<button onClick={onSubmit} className="btn btn-outline-info">
Update Category
</button>
</div>
</form>
);
return (
<Base
title="Update a category here!!"
description="Update Categories here"
className="container bg-info p-4">
<div className="row bg-white rounded">
<div className="col-md-8 offset-md-2">
{successMessage()}
{warningMessage()}
{myCategoryForm ()}
{goBack ()}
</div>
</div>
</Base>
);
};
export default UpdateCategory;
import { API } from "../../backend";
//category calls
export const createCategory = (userId, token, category) => {
return fetch(`${API}/category/create/${userId}`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Bearer ${token}`
},
body: JSON.stringify(category)
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//get a category
export const getCategory = categoryId => {
return fetch(`${API}/category/${categoryId}`, {
method: "GET"
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//get all categories
export const getCategories = () => {
return fetch(`${API}/categories`, {
method: "GET"
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//delete a category
export const deleteCategory = (categoryId, userId, token) => {
return fetch(`${API}/category/${categoryId}/${userId}`, {
method: "DELETE",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`
}
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//update a category
export const updateCategory = (categoryId, userId, token, category) => {
return fetch(`${API}/category/${categoryId}/${userId}`, {
method: "PUT",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`
},
body: category
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//products calls
//create a product
export const createaProduct = (userId, token, product) => {
return fetch(`${API}/product/create/${userId}`, {
method: "POST",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`
},
body: product
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//get all products
export const getProducts = () => {
return fetch(`${API}/products`, {
method: "GET"
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//delete a product
export const deleteProduct = (productId, userId, token) => {
return fetch(`${API}/product/${productId}/${userId}`, {
method: "DELETE",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`
}
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//get a product
export const getProduct = productId => {
return fetch(`${API}/product/${productId}`, {
method: "GET"
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
//update a product
export const updateProduct = (productId, userId, token, product) => {
return fetch(`${API}/product/${productId}/${userId}`, {
method: "PUT",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`
},
body: product
})
.then(response => {
return response.json();
})
.catch(err => console.log(err));
};
----------------------------------------------ManageCategory--------------------------------------------- ----------------------------------------------管理类别--- ------------------------------------------
import React , {useState,useEffect} from 'react'
import Base from '../core/Base'
import { Link } from 'react-router-dom';
import { isAutheticated } from '../auth/helper';
import { getCategories, deleteCategory} from './helper/adminapicall';
const ManageCategories= () => {
const [categories, setCategories] = useState([]);
const { user, token } = isAutheticated();
const preload = () => {
getCategories().then(data => {
if (data.error) {
console.log(data.error);
} else {
setCategories(data);
}
});
};
useEffect(() => {
preload();
}, []);
const deleteThisCategory = categoryId => {
deleteCategory(categoryId, user._id, token).then(data => {
if (data.error) {
console.log(data.error);
} else {
preload();
}
});
};
return (
<Base title="Welcome admin" description="Manage products here">
<h2 className="mb-4">All products:</h2>
<Link className="btn btn-info" to={`/admin/dashboard`}>
<span className="">Admin Home</span>
</Link>
<div className="row">
<div className="col-12">
<h2 className="text-center text-white my-3">Total 4 categories</h2>
{categories.map((category, index) => {
return (
<div key={index} className="row text-center mb-2 ">
<div className="col-4">
<h3 className="text-white text-left">{category.name}</h3>
</div>
<div className="col-4">
<Link
className="btn btn-success"
to={`/admin/category/update/${category._id}`}
>
<span className="">Update</span>
</Link>
</div>
<div className="col-4">
<button
onClick={() => {
deleteThisCategory(category._id);
}}
className="btn btn-danger"
>
Delete
</button>
</div>
</div>
);
})}
</div>
</div>
</Base>
);
};
export default ManageCategories;
-------------------------------------------UpdateCategory------------------------------------------------ -------------------------------------------------------更新类别------ ------------------------------------------
import React, { useState,useEffect } from "react";
import Base from "../core/Base";
import { isAutheticated } from "../auth/helper";
import { Link } from "react-router-dom";
import { getCategory, updateCategory } from "./helper/adminapicall";
const UpdateCategory = ({match}) => {
const [name, setName] = useState("");
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false);
const { user, token } = isAutheticated();
const preload = categoryId => {
getCategory(categoryId).then(data =>{
if(data.error) {
console.log(data.error);
}else{
setName(data.name)
}
});
};
useEffect(() => {
preload(match.params.categoryId);
}, []);
const goBack = () => (
<div className="mt-5">
<Link className="btn btn-sm btn-success mb-3" to="/admin/dashboard">
Admin Home
</Link>
</div>
);
const handleChange = event => {
setError("");
setName(event.target.value);
};
const onSubmit = event => {
event.preventDefault();
setError("");
setSuccess(false);
//backend request fired
updateCategory(match.params.categoryId, user._id, token, { name }).then(data => {
if (data.error) {
setError(true);
} else {
setError("");
setSuccess(true);
setName("");
}
});
};
const successMessage = () => {
if (success) {
return <h4 className="text-success">Category created successfully</h4>;
}
};
const warningMessage = () =>{
if(error){
return <h4 className="text-danger">Failed to update</h4>
}
};
const myCategoryForm = () =>(
<form>
<div className="form-group">
<p className="lead">Enter the category</p>
<input
type="text"
className="form-control my-3"
onChange={handleChange}
value={name}
autoFocus
required
placeholder="For Ex.Summer"
/>
<button onClick={onSubmit} className="btn btn-outline-info">
Update Category
</button>
</div>
</form>
);
return (
<Base
title="Update a category here!!"
description="Update Categories here"
className="container bg-info p-4">
<div className="row bg-white rounded">
<div className="col-md-8 offset-md-2">
{successMessage()}
{warningMessage()}
{myCategoryForm ()}
{goBack ()}
</div>
</div>
</Base>
);
};
export default UpdateCategory;
---------------------------------------------Category(controller)---------------------------------------- ---------------------------------------------类别(控制器)- --------------------------------------
const Category = require("../models/category");
exports.getCategoryById = (req, res, next, id) => {
Category.findById(id).exec((err, cate) => {
if (err) {
return res.status(400).json({
error: "Category not found in DB"
});
}
req.category = cate;
next();
});
};
exports.createCategory = (req, res) => {
const category = new Category(req.body);
category.save((err, category) => {
if (err) {
return res.status(400).json({
error: "NOT able to save category in DB"
});
}
res.json({ category });
});
};
exports.getCategory = (req, res) => {
return res.json(req.category);
};
exports.getAllCategory = (req, res) => {
Category.find().exec((err, categories) => {
if (err) {
return res.status(400).json({
error: "NO categories found"
});
}
res.json(categories);
});
};
exports.updateCategory = (req, res) => {
const category = req.category;
category.name = req.body.name;
category.save((err, updatedCategory) => {
if (err) {
return res.status(400).json({
error: "Failed to update category"
});
}
res.json(updatedCategory);
});
};
exports.removeCategory = (req, res) => {
const category = req.category;
category.remove((err, category) => {
if (err) {
return res.status(400).json({
error: "Failed to delete this category"
});
}
res.json({
message: "Successfull deleted"
});
});
};
try this尝试这个
....
....
const onSubmit = (event, val) => {
event.preventDefault();
setError("");
setSuccess(false);
//backend request fired
updateCategory(match.params.categoryId, user._id, token, { name:val }).then(
(data) => {
if (data.error) {
setError(true);
} else {
setError("");
setSuccess(true);
setName("");
}
}
);
};
....
....
<button onClick={(e)=> onSubmit(e, name)} className="btn btn-outline-info">
Update Category
</button>
....
....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.