在反应中从后端 api 获取数据时取消保护

后端 api 获取数据时取消保护"/>

在反应中从后端 api 获取数据时取消保护

我在获取所有产品表单后端时反驳了一个未定义的数据 我在前端使用 React 和用于处理全局状态的 redux 工具包 和 NodeJS + express JS 用于后端 和 atlas cloud 上的数据库 monogodb

后端：

router.get(
    "/get-all-products",
    catchAsyncErrors(async (req, res, next) => {
        try {
            const products = await Product.find();

            res.status(201).json({
                success: true,
                products,
            });
        } catch (error) {
            return next(new ErrorHandler(error, 400));
        }
    })
);

减速器：

import { createReducer } from "@reduxjs/toolkit";


const initialState = {
    isLoading: true,
};


export const productReducer = createReducer(initialState, {
    getAllProductsRequest: (state) => {
        state.isLoading = true;
    },
    getAllProductsSuccess: (state, action) => {
        state.isLoading = false;
        state.allProducts = action.payload;
    },
    getAllProductsFailed: (state, action) => {
        state.isLoading = false;
        state.error = action.payload;
    },
});

动作：

export const getAllProducts = () => async (dispatch) => {
    try {
        dispatch({
            type: "getAllProductsRequest",
        });

        const { data } = await axios.get(`${server}/product/get-all-products`);
        dispatch({
            type: "getAllProductsSuccess",
            payload: data.products,
        });
    } catch (error) {
        dispatch({
            type: "getAllProductsFailed",
            payload: error.response.data.message,
        });
    }
};

店铺：

import { configureStore } from '@reduxjs/toolkit';
import { userReducer } from './reducers/user';
import { sellerReducer } from './reducers/seller';
import { productReducer } from './reducers/product';
import { eventReducer } from './reducers/event';

const Store = configureStore({
    reducer: {
        user: userReducer,
        seller: sellerReducer,
        products: productReducer,
        events: eventReducer,
    },
});

jsx 页面：

 import { useState, useEffect } from "react";
import styles from "../styles/styles";
import { useSearchParams } from "react-router-dom";

import ProductCard from "../components/Route/productCard/ProductCard";
import Header from "../components/layout/Header";
import Loader from "../components/layout/Loader";
import Footer from "../components/layout/Footer";
import { useSelector } from "react-redux";

const ProductsPage = () => {
  const [searchParams] = useSearchParams();
  const categoryData = searchParams.get("category");
  const { allProducts, isLoading } = useSelector((state) => state.products);
  const [data, setData] = useState([]);

  


  useEffect(() => {
    if (categoryData === null) {
      const d = allProducts;
      setData(d);
      console.log(d);
    } else {
      const d =
        allProducts && allProducts.filter((i) => i.category === categoryData);
      setData(d);
    }
    //    window.scrollTo(0,0);
  }, [allProducts]);

  return (
    <>
      {isLoading ? (
        <Loader />
      ) : (
        <div>
          <Header activeHeading={3} />
          <br />
          <br />
          <div className={`${styles.section}`}>
            <div className="grid grid-cols-1 gap-[20px] md:grid-cols-2 md:gap[25px] lg:grid-cols-4 lg:gap-[25px] xl:grid-cols-5 xl:gap-[30px] mb-12">
              {data &&
                data.map((i, index) => <ProductCard data={i} key={index} />)}
            </div>
            {data && data.length === 0 ? (
              <h1 className="text-center w-full  pb-[100px] text-[20px]">
                No Products Found !
              </h1>
            ) : null}
          </div>
          <Footer />
        </div>
      )}
    </>
  );
};

export default ProductsPage;

我需要突袭这个错误并知道它为什么会发生

1. 201 Created

   是您的 GET 请求的错误响应状态。

   200 OK

   会更合适，并且已经是

   res.json()

   的默认值。

   res.json({ products });
   

2. success: true

   完全没有必要。如果有任何失败，您的服务器将响应错误响应状态 (

   4xx

   /

   5xx

   )

3. 使用 memo 钩子

   可以更轻松地实现您尝试使用类别过滤器执行的操作

4. 你没有检查错误

const [searchParams] = useSearchParams();
const categoryData = searchParams.get("category");
const {
  allProducts,
  isLoading,
  error 
} = useSelector((state) => state.products);

const data = useMemo(
  () =>
    categoryData
      ? allProducts.filter(({ category }) => category === categoryData)
      : allProducts,
  [allProducts, categoryData]
);

if (error) {
  return <p className="warn">{error}</p>;
}

注意：没有

useState

useEffect

console.log()

还要确保将

allProducts

.map()

.filter()

const initialState = {
  isLoading: true,
  allProducts: [], //