（React 和 Django）在主页上显示产品工作正常，但是当我单击任何特定产品时，呈现错误

这篇文章是以下系列的第三部分 - （您可以跳过前两部分，但是 - 它可以作为参考）

1. React、Django、Django REST 和 Axios 的大量问题 https://stackoverflow.com/questions/66239527/a-large-number-of-problems-with-react-django-django-rest-and-axios
2. 主页上的产品无法正确显示（Django、Django Rest 和 React） https://stackoverflow.com/questions/66422454/products-on-the-homepage-are-not-being-displayed-properly-django-django-rest-a
3. （React 和 Django）在主页上显示产品工作正常，但是当我单击任何特定产品时，呈现错误 https://stackoverflow.com/questions/66588419/react-and-django-displaying-products-on-the-homepage-is-working-fine-but-when

（注意：HomeScreen.Js和ProductScreen.js的代码在第三部分中更新，因此与前两部分中显示的这些文件的代码不同）

My homepage looks like this -

But when I click on any particular product, I get this result -

我正在向我的朋友咨询这个问题，他告诉我，我的 React 代码应该没问题，问题应该出在 Django 内部的某个地方。

当我检查命令提示符（我从中运行 Django 服务器）时 - 当尝试显示产品编号 1 时，我得到此输出 - [2021年3月11日19:18:05]“获取/api/products/1 HTTP/1.1”200 2123

请看一下代码，也许你能够发现一些隐藏的错误。

HomeScreen.js -

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

function HomeScreen() {
  const [products, setProducts] = useState([])

  useEffect(() => {
    
    async function fetchProducts() {
     const { data } = await axios.get('/api/products/')
     setProducts(data)
    }  

    fetchProducts()
  },[] )

  return (
    <div>
      <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>
    </div>
  );
}

export default HomeScreen;

产品屏幕.js -

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { Row, Col, Image, ListGroup, Button, Card } from "react-bootstrap";
import Rating from "../components/Rating";
import axios from "axios"

function ProductScreen({ match }) {

  const [product, setProduct] = useState([])

  useEffect(() => {
    
    async function fetchProduct() {
     const { data } = await axios.get(`/api/products/${match.params.id}`)
     setProduct(data)
    }  

    fetchProduct()
  },[] )

  return (
    <div>
      <Link to="/" className="btn btn-light my-3">
        Go Back
      </Link>
      <Row>
        <Col md={6}>
          <Image src={product.image} alt={product.name} fluid />
        </Col>

        <Col md={3}>
          <ListGroup variant="flush">
            <ListGroup.Item>
              <h3>{product.name}</h3>
            </ListGroup.Item>

            <ListGroup.Item>
              <Rating
                value={product.rating}
                text={`${product.numReviews} reviews`}
                color={"#f8e825"}
              />
            </ListGroup.Item>

            <ListGroup.Item>Price: ${product.price}</ListGroup.Item>

            <ListGroup.Item>Description: {product.description}</ListGroup.Item>
          </ListGroup>
        </Col>

        <Col md={3}>
          <Card>
            <ListGroup variant="flush">
              <ListGroup.Item>
                <Row>
                  <Col>Price:</Col>
                  <Col>
                    <strong>${product.price}</strong>
                  </Col>
                </Row>
              </ListGroup.Item>

              <ListGroup.Item>
                <Row>
                  <Col>Status:</Col>
                  <Col>
                    {product.countInStock > 0 ? "In Stock" : "Out of Stock"}
                  </Col>
                </Row>
              </ListGroup.Item>

              <ListGroup.Item>
                <Button
                  className="btn-block"
                  disabled={product.countInStock == 0}
                  type="button"
                >
                  Add to Cart
                </Button>
              </ListGroup.Item>
            </ListGroup>
          </Card>
        </Col>
      </Row>
    </div>
  );
}

export default ProductScreen;

包.json -

{
  "name": "frontend",
  "proxy": "http://127.0.0.1:8000",
  "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.7.0",
    "axios": "^0.21.1",
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.3",
    "react-dom": "^17.0.1",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.2",
    "web-vitals": "^1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

urls.py（在基本应用程序文件夹内）-

from django.conf.urls import url
from . import views

urlpatterns = [
    
    url('products/', views.getProducts, name="products"),
    url('products/<str:pk>/', views.getProduct, name="product"),
    url('routes/', views.getRoutes, name="routes"),
]

视图.py -

from django.shortcuts import render
from django.http import JsonResponse
from rest_framework.decorators import api_view
from rest_framework.response import Response

from .products import products

# Create your views here.
@api_view(['GET'])
def getRoutes(request):
    routes = [
    '/api/products/',
    '/api/products/create/',

    'api/products/upload/',

    'api/products/<id>/reviews/',

    'api/products/top/',
    'api/products/<id>/',

    'api/products/delete/<id>/',
    'api/products/<update>/<id>/',

    ]
    return Response(routes)

@api_view(['GET'])
def getProducts(request):
    return Response(products)

@api_view(['GET'])
def getProduct(request, pk):
    product = None
    for i in products:
        if i['_id'] == pk:
            product = i
            break

    return Response(product)

如果您发现此错误的任何解决方案，请告诉我。非常感谢您最终的答复。

通过将 Django 版本从 3.1.6 更改为 3.1.4 解决了这个问题，我也更改了这一点 -

from django.conf.urls import url
from . import views

urlpatterns = [
    
    url('products/', views.getProducts, name="products"),
    url('products/<str:pk>/', views.getProduct, name="product"),
    url('routes/', views.getRoutes, name="routes"),
]

回到这个——

from django.urls import path
from . import views

urlpatterns = [
    
    path('products/', views.getProducts, name="products"),
    path('products/<str:pk>/', views.getProduct, name="product"),
    path('routes/', views.getRoutes, name="routes"),
]