React、Django、Django REST 和 Axios 的大量问题

Question

这篇文章是以下系列的第一部分-

1. A large number of problems with React, Django, Django REST and Axios
2. Products on the homepage are not being displayed properly (Django, Django Rest and React)
3. (React and Django) Displaying products on the homepage is working fine, but when I click on any particular product, then the rendering is wrong

我正在学习关于建立电子商店的非常好的课程，但我已经到了这个阶段，我不太确定我编写的代码的确切目的是什么。 （尤其是 HomeScreen.js 中的异步函数）我们使用的是 React 和 Django。我的问题与主页或 HomeScreen.js 文件有关，当我从静态 products.json 文件加载产品时，它工作正常，但后来，在课程中，我们不得不切换它并从中加载产品使用 Django REST 和 Axios 的 API（使用 axios 来消除 CORS 错误），我现在的问题是，我无法将产品加载到 HomeScreen.js，我看到的只是一个带有标题的空白页面，而不是整页。我正在通过 npm start 命令运行反应服务器（其结果可以在下面的屏幕截图中看到），但我也尝试运行 Django 服务器，这给了我这个错误 - OSError: [WinError 123]。 （注意：Django 服务器已修复，现在正在运行 - 所以当我想显示网站时，我同时运行 React 服务器和 Django 服务器）

如果您能找到解决这些问题的方法，请告诉我。非常感谢您提前提供的任何帮助。

页面看起来像这样 -

它应该看起来像这样 -

（注意：通过修改基础（app）文件夹中的 urls.py 解决了显示产品的问题 -

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

改为

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"),
]

)

当我查看控制台时，我收到了很多错误，例如 - （并非所有这些错误 是有害的，因为例如与 collapseOnSellect 相关的那个甚至在所有其他错误都出现并且一切正常之前就已经存在了）

127.0.0.1:8000/api/products/:1 Failed to load resource: net::ERR_CONNECTION_REFUSED

以下是有关控制台中第三个错误的更多详细信息 -

（注意：解决以下（路径相关和其余相关）错误后，此错误已消失）

另一个问题是，VSCode 给了我这两个错误 - No name 'path' in module 'django.urls' 和 No name 'include' in module 'django.urls'（这些错误与两个 urls.py 文件有关）

（注意：这些错误已通过在项目的 urls.py 文件中将 path 更改为 url（在两个 urls.py 文件中）和将 from django.urls import url, include 更改为 from django.conf.urls import url, include 并更改 from django.urls import url 来解决到基础应用程序的 urls.py 文件中的 from django.conf.urls import url）

我在views.py 中发现了另外两个错误——Unable to import 'rest_framework.decorators' 和Unable to import 'rest_framework.response'。我不知道，为什么会出现这么多错误，因为我正在尝试按照教程中的每一步进行操作。

（注意：这两个错误已与此 SO 帖子一起解决 - Can't import: 'unable to import rest_framework' when importing serializer? (windows))

对不起，如果我对问题的描述不准确，因为我在 Django 和 React 等方面仍然只是初学者。但如果你问我正确的问题，我可能会进一步向你解释。我已根据教程安装了 Axios，并将其集成到 settings.py 文件中。

前端和后端文件夹位于同一个文件夹中。

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('http://127.0.0.1:8000/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;

views.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)

基本（app）文件夹中的urls.py -

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

项目文件夹中的urls.py -

from django.contrib import admin
from django.urls import path, include
 
urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('base.urls')),
]

Answer 1

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 responce = await axios.get('http://127.0.0.1:8000/api/products/')
    .then((data) =>  setProducts(data.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;