API在邮递员中工作正常，但在反应的前端部分却不行

【问题标题】：API works fine in postman but not in frontend part of reactAPI在邮递员中工作正常，但在反应的前端部分却不行
【发布时间】：2020-08-22 17:03:32
【问题描述】：

我正在 MERN 堆栈中做一个项目（电子商务项目）以进行练习。我对 Mern 堆栈相当陌生。除了前端部分的“UpdateCategory”外，一切正常。它在 POSTMAN 中完美运行。在前端部分它给出了错误。

我已附上与 updateCategory 部分相关的整个代码，包括后端部分和 adminapi 调用以供参考。

前端“updateCategory”代码附在下面的adminapicall下方，请查看并尝试找出问题所在。

看看这个截图，点击更新按钮后，只有错误功能在起作用。

https://i.stack.imgur.com/ApgVu.png

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

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;

----------------------------------------------类别（控制器）----------------------------------------

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

【问题讨论】：

  • 控制台是否出现任何错误？
  • 不，它不会在控制台中给出任何错误

标签： javascript reactjs mongoose postman mern


【解决方案1】：

试试这个

UpdateCategory.jsx

....
....
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>
....
....

【讨论】：

    猜你喜欢
    • 2017-08-16
    • 2020-05-25
    • 2021-12-23
    • 1970-01-01
    • 2020-07-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode