我在一个电子商务项目使用反应工作.我无法使用axios从后端获取产品

Question

下面是server.js, homesscreen .js, pacKAGE. js文件。JSON和App.js文件。在这条路径上也看不到任何东西:http://localhost:5000/api/products得到错误为"Cannot GET/api/products"。Localhost:5000运行正常。下面是server.js、homesscreen .js、pacKAGE. js文件。JSON和App.js文件。在这条路径上也看不到任何东西:http://localhost:5000/api/products得到错误为"Cannot GET/api/products"。下面是server.js、homesscreen .js、pacKAGE. js文件。JSON和App.js文件。在这条路径上也看不到任何东西:http://localhost:5000/api/products得到错误为"Cannot GET/api/products"。下面是server.js、homesscreen .js、pacKAGE. js文件。JSON和App.js文件。在这条路径上也看不到任何东西:http://localhost:5000/api/products得到错误为"Cannot GET/api/products"。下面是server.js、homesscreen .js、pacKAGE. js文件。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

包。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"返回一个承诺，它应该被处理。

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