API GET 响应在前端不起作用

Question

该代码在 Postman 中运行良好。 但是在前端获取它时，响应不起作用。 我找不到解决方案。 我是 MERN 堆栈的新手。 它给了我错误。 product.action.js:7 Uncaught (in promise) AxiosError {message: 'timeout of 1000ms exceeded', name: 'AxiosError', code: 'ECONNABORTED', config: {…}, request: XMLHttpRequest}后端代码： - router.get("/products/:slug", getProductsBySlug);

    exports.getProductsBySlug = (req, res) => {
  const { slug } = req.params;
  Category.findOne({ slug: slug })
    .select("_id")
    .exec((error, category) => {
      if (error) {
        return res.status(400).json({ error });
      }
      if (category) {
        Product.find({ category: category._id }).exec((error, products) => {
          if (error) {
            return res.status(400).json({ error });
          }
          res.status(200).json({ products });
        });
      }
    });
};

前端代码：product.action.js

    import axiosInstance from "../helpers/axios";

export const getProductsBySlug = (id) => {
  return async (dispatch) => {
    const res = await axiosInstance.get(`/products/${id}`);
    console.log(res);
  };
};

` 上述响应发生错误。

` 产品列表页面：

import React, { useEffect } from "react";
    import { useDispatch } from "react-redux";
    import { getProductsBySlug } from "../../actions";
    import Layout from "../../components/Layout";
    import { useParams } from "react-router-dom";

    const ProductListPage = (props) => {
      const dispatch = useDispatch();
      const slug = useParams();
      useEffect(() => {
        console.log(slug);
        dispatch(getProductsBySlug(slug));
      }, []);
      return <Layout>Product List Page</Layout>;
};

   export default ProductListPage;

在 App.js 中

 function App() {
      return (
        <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" exact element={<HomePage />} />
          <Route path=":slug" element={<ProductListPage />} />
        </Routes>
      </BrowserRouter>
    </div>
  );

请告诉我路。

Answer 1

在您的App.js中，将Route声明更改为（添加前导/ ）：

<Route path="/:slug" element={<ProductListPage />} />

在您的productListPage组件中，您应该从useParams解构该属性：

const { slug } = useParams();