我在一个使用react.I的电子商务项目中工作。我无法使用axios从后端获取产品

Question

下面是server.js，HomeScreen.js，pacKAGE.JSON和App.js格式的文件。在此路径中也看不到任何内容：http://localhost:5000/api/products获取错误为"Cannot GET /api/products。localhost:5000运行正常。下面是server.js、HomeScreen.js、pacKAGE.JSON和App.js文件。在此路径中也看不到任何内容：http://localhost:5000/api/products获取错误为"Cannot GET /api/products。下面是server.js，HomeScreen.js，pacKAGE.JSON和App.js格式的文件。在这个路径中也看不到任何东西：http://localhost:5000/api/products得到的错误是“无法获取/api/products。下面是server.js、HomeScreen.js、pacKAGE.JSON和App.js文件。在这个路径中也看不到任何东西：http://localhost:5000/api/products得到的错误是”无法获取/api/products“。下面是server.js，HomeScreen.js，pacKAGE.JSON和App.js格式的文件。在此路径中也看不到任何内容：http://localhost:5000/api/products收到错误消息"Cannot GET /api/products“。

Server.js文件

const express = require("express");
const products = require("./data/products");
const cors = require("cors");


const app = express()

app.use(cors());
app.get("/", (req, res) => {

    res.send("API is running...")
})

app.get("/api/products/:id", (req, res) => {
    const product = products.find(p => p._id === req.params.id)
    res.json(product)
})

app.listen(5000, () => {

    console.log("Server running on port 5000")
})

HomeScreen.js文件

 import React, {useState, useEffect} from 'react'
 import { Row, Col } from "react-bootstrap"
 import Product from "../components/Product"
 import axios from "axios"


    const HomeScreen = () => {

const [products, setProducts] = useState([])

useEffect(() => {
    console.log("Hello")
    const fetchProducts = async () => {
        const {
            data
        } = await axios.get('http://localhost:5000/api/products')
        console.log(data);

        setProducts(data);
    }
    fetchProducts()
}, [])

return (
    <>
     <h1>Latest Products</h1>
     <Row>
           {products.map((product) => (

               <Col key = {product._id} sm = {12} md = {6} lg = {4} xl = {3}>
               <Product product = {product} />
               </Col>
           )


           )}
     </Row>
    </>
    )
   }

  export default HomeScreen

package.json文件(前端)

{
 "name": "frontend",
"proxy": "http://localhost:5000",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.8.1",
"axios": "^0.21.1",
"react": "^17.0.1",
"react-bootstrap": "^1.5.1",
"react-dom": "^17.0.1",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.0"
 },
 "scripts": {
 "start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
 },

App.js文件

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";
import ProductScreen from "./screens/ProductScreen";


 const App = () =>  {
 return (
 <Router>
 <Header />
 <main className = "py-3">
  <Container>
  <Route path = "/" component = {HomeScreen} exact />
  <Route path = "/product/:id" component = {ProductScreen} />
  </Container>

 </main>
 <Footer/>
 </ Router>
 )
 }

export default App;

Answer 1

您需要为"/api/products“添加get路由。如果"products.find“返回一个promise，那么它应该被处理。

app.get("/api/products", async (req,res) => {
    try { 
     const product = await products.find();
     res.json(product);
  } catch(e) {
    //handle the error here  
 }
})

Answer 2

app.get("/api/products/:id", (req, res) => {
    products.find({id:req.params.id}).exec(function(err, product) {
      if (err) {
          console.log(err);
      } else {
          const product = res.json(product);
      }
  })
});