堆棧內存溢出
  簡體   English   中英

API 在 postman 中工作正常，但在反應的前端部分中卻沒有

[英]API works fine in postman but not in frontend part of react

 原文  2020-05-07 11:54:07  2   1    javascript/ reactjs/ mongoose/ postman/ mern

問題描述

我正在 MERN 堆棧中做一個項目（電子商務項目）以進行練習。 我對 Mern 堆棧相當陌生。 除了前端部分的“UpdateCategory”外，一切正常。 它在 POSTMAN 中完美運行。 在前端部分它給出了錯誤。

我附上了與 updateCategory 部分相關的整個代碼，包括后端部分和 adminapi 調用以供參考。

前端“updateCategory”代碼附加在下面的 adminapicall 下方，請查看該代碼並嘗試找出問題所在。

看看這個截圖，點擊更新按鈕后，只有錯誤 function 工作正常。

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

----------------------------------------------管理類別--- ------------------------------------------

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;

-------------------------------------------------------更新類別------ ------------------------------------------

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

1 個解決方案

解決方案1
 0  2020-05-08 09:53:15

嘗試這個

更新類別.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>
....
....

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Postman 中的 API 工作正常，但在本機反應中出現 422 錯誤 API 適用於 postman 但不適用於 React 中的 axios Postman 適用於 App Script，React forms 失敗 AWS API網關返回400錯誤請求，但Postman正常工作 API 在郵遞員中有效，但在反應前端中無效 文件上傳錯誤 - 適用於 Postman 但不適用於前端 API適用於Postman，但不適用於瀏覽器 通過對 axios 調用做出反應來啟動 php 會話並不能使會話保持活動狀態，但是與郵遞員一起執行它可以正常工作 Laravel Passport 在 PostMan 上工作正常，但在反應原生應用程序中返回 401？ 獲取反應應用程序中的調用不返回正文，相同的調用適用於 postman
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM