GET http://localhost:3001/api/products/3 404（未找到）[关闭]

Question

关闭。 此问题不可重现或由拼写错误引起。 它目前不接受答案。

---

此问题是由拼写错误或无法再重现的问题引起的。 虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。

2天前关闭。

改进这个问题

您好，我正在尝试创建一个程序来使用 React 和 redux 显示来自后端的产品列表。 尽管我根据需要在主页上列出了产品，但在尝试获取主屏幕上特定产品的数据时出现错误“GET http://localhost:3001/api/products/3 404（未找到）”。 我在 package.json 文件中添加了 'res.get("/api/products")' 以及设置代理，但仍然无法获取主屏幕中列出的项目的数据。 谁能帮我吗？

服务器.js

    import express from "express";
    import data from "./data.js";
    
    const app = express();
    
    app.get("/api/products/:id", (req, res) => {
      const product = data.products.find((x) => x.newid === req.params.id);
    
      if (product) {
        res.send(product);
      } else {
        res.status(404).send({ message: "Sorry, product not found!" });
      }
    });
    // creating an array of products accessing the data.js
    app.get("/api/products", (req, res) => {
      res.send(data.products);
    });
    // app.get("/", (req, res) => {
    //   res.send("Server is ready");
    // });
    const port = process.env.PORT || 4000;
    // set default port to 5000
    app.listen(port, () => {
      console.log(`Serve at http://localhost:${port}`);
    });

productscreen.js

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link, useParams } from "react-router-dom";
import { detailsProduct } from "../actions/productActions";
import LoadingBox from "../components/LoadingBox";
import MessageBox from "../components/MessageBox";

export default function ProductScreen(props) {
  const dispatch = useDispatch();
  const params = useParams();
  const { id: productId } = params;
  console.log("ID: " + productId);
  const productDetails = useSelector((state) => state.productDetails);

  const { loading, error, product } = productDetails;

  useEffect(() => {
    dispatch(detailsProduct(productId));
  }, [dispatch, productId]);
  // console.log("ID: " + productDetails);

  return (
    <div>
      {loading ? (
        <LoadingBox></LoadingBox>
      ) : error ? (
        <MessageBox variant="danger">{error}</MessageBox>
      ) : (
        <div>
          <Link to="/">Back to Home</Link>
          <div className="row top">
            <div className="col-2">
              <img
                className="large"
                src={product && product.image}
                alt={product && product.name}
              ></img>
            </div>
            <div className="col-1">
              <ul>
                <li>
                  <h1>{product && product.name}</h1>
                </li>
                <li>Category: {product && product.category}</li>
                <li>Description: {product && product.description}</li>
              </ul>
            </div>
            <div className="col-1">
              <div className="card card-body">
                <ul>
                  <li>
                    <div className="row">
                      <div>Category </div>
                      <div className="price">{product && product.category}</div>
                    </div>
                  </li>
                  <li>
                    <div className="row">
                      <div>Status </div>
                      {/* <div>
                    {product && product.countInStock > 0 ? (
                      <span className="success">In Stock</span>
                    ) : (
                      <span className="danger">Unavailable</span>
                    )}
                  </div> */}
                    </div>
                  </li>
                  <li>
                    <button className="primary block ">Add to Cart</button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

data.js（示例）

const data = {
  products: [
    {
      newid: "1",
      name: "Eucalyptus tree",
      image: "/images/p1.jpg",
      category: "Indegenious tree",
      domain: "Eukarya",
      kingdom: "Plantae",
      phylum: "Magnoliophyta",
      class: "Magnoliopsida",
      order: "Myrtales",
      family: "Myrtales",
      genes: "Eucalyptus",
      description: "tree 1 ",
    },
    {
      newid: "2",
      name: "Fern",
      imagess: "/images/p1.jpg",
      category: "Indegenious tree",
      domain: "Eukarya",
      kingdom: "Plantae",
      phylum: "Magnoliophyta",
      class: "Magnoliopsida",
      order: "Myrtales",
      family: "Myrtales",
      genes: "Eucalyptus",
      description: " tree 2",
    },
    {
      newid: "3",
      name: "Mango tree",
      image: "/images/Teff_pluim_Eragrostis_tef.jpg",
      category: "Fruit",
      domain: "Eukarya",
      kingdom: "Plantae",
      phylum: "Magnoliophyta",
      class: "Magnoliopsida",
      order: "Myrtales",
      family: "Myrtales",
      genes: "Mango",
      description: "high quality tree",
    },
  ],
};

export default data;