(React и Django) Отображение продуктов на главной странице работает нормально, но когда я нажимаю на какой-либо конкретный продукт, рендеринг неверен

этот пост является третьей частью следующей серии - (однако вы можете пропустить эти первые две части - они могут служить справочным материалом)

1. Большое количество проблем с React, Django, Django REST и Axios
2. Продукты на главной странице не отображается правильно (Django, Django Rest и React)
3. (React и Django) Отображение продукты на главной странице работают нормально, но когда я нажимаю на какой-либо конкретный продукт, рендеринг становится неправильным

(Примечание: код HomeScreen.Js и ProductScreen.js обновлен в этой третьей части, поэтому он отличается от кодов этих файлов, показанных в первых двух частях)

Моя домашняя страница выглядит так:

Но когда я нажимаю на какой-либо конкретный продукт, я получаю такой результат:

Я консультировался по этому вопросу со своим другом, который сказал мне, что мой код React должен быть в порядке, а проблема должна быть где-то внутри Django.

Когда я проверяю свою командную строку (из которой я запускаю свой сервер Django) - я получаю этот вывод при попытке отобразить номер продукта 1 - [11/Mar/2021 19:18:05] GET /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)

Пожалуйста, дайте мне знать, если вы видите какое-либо решение этой ошибки. Большое спасибо за Ваш возможный ответ.