(React和Django)在主页上显示产品工作正常，但是当我单击任何特定产品时，渲染是错误的 [英] (React and Django) Displaying products on the homepage is working fine, but when I click on any particular product, then the rendering is wrong
本文介绍了(React和Django)在主页上显示产品工作正常，但是当我单击任何特定产品时，渲染是错误的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
本文是以下系列文章的第三部分-(您可以跳过前两部分，但是-可以作为参考)
-
但是，当我单击任何特定产品时，都会得到此结果-
我正在和我的朋友咨询这个问题，他告诉我，我的React代码应该没问题，而且问题应该在Django内部.
当我检查命令提示符(从中运行Django服务器)时-尝试显示产品编号1时得到此输出-[11/Mar/2021 19:18:05]"GET/api/products/1 HTTP/1.1"200 2123
请看一下代码，也许您将能够找到一些隐藏的错误.
HomeScreen.js-
从"react"导入React，{useState，useEffect}；从"react-bootstrap"导入{Row，Col}；从"../components/Product"导入产品；从"axios"导入axios函数HomeScreen(){const [产品，setProducts] = useState([])useEffect(()=> {异步功能fetchProducts(){const {data} =等待axios.get('/api/products/')setProducts(数据)}fetchProducts()}，[])返回 (< div>< h1>最新产品</h1><行>{products.map((product)=>(<颜色键= {product._id} sm = {12} md = {6} lg = {4} xl = {3}><产品product = {product}/></Col>))}</行></div>);}导出默认的HomeScreen;ProductScreen.js-
从"react"导入React，{useState，useEffect}；从"react-router-dom"导入{Link}；从"react-bootstrap"导入{行，列，图像，列表组，按钮，卡片}；从"../components/Rating"导入评分；从"axios"导入axios函数ProductScreen({match}){const [product，setProduct] = useState([])useEffect(()=> {异步功能fetchProduct(){const {data} =等待axios.get(`/api/products/$ {match.params.id}`)setProduct(数据)}fetchProduct()}，[])返回 (< div><链接到="/"className ="btn btn-light my-3".回去</链接><行>< Col md = {6}><图片src = {product.image} alt = {product.name}流体/></Col>< Col md = {3}>< ListGroup variant ="flush">< ListGroup.Item>< h3> {product.name}</h3></ListGroup.Item>< ListGroup.Item><评分值= {product.rating}text = {`$ {product.numReviews}条评论`}color = {"#f8e825}/></ListGroup.Item>< ListGroup.Item>价格:$ {product.price}</ListGroup.Item>< ListGroup.Item>说明:{product.description}</ListGroup.Item></ListGroup></Col>< Col md = {3}><卡>< ListGroup variant ="flush">< ListGroup.Item><行>< Col>价格:</Col>< Col>< strong> $ {product.price}</strong></Col></行></ListGroup.Item>< ListGroup.Item><行>< Col>状态:</Col>< Col>{product.countInStock>0?有库存":缺货"}</Col></行></ListGroup.Item>< ListGroup.Item><按钮className ="btn-block"；已禁用= {product.countInStock == 0}type ="button">添加到购物车</按钮></ListGroup.Item></ListGroup></卡></Col></行></div>);}导出默认的ProductScreen;package.json-
{"name":"frontend"，"proxy":"http://127.0.0.1:8000"，版本":"0.1.0&"，私人":是的，依赖项":{"@ 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&"；}，脚本":{"start":"react-scripts start"，"build":"react-scripts build"，"test":"react-scripts test"，弹出":反应脚本弹出"；弹出".}，"eslintConfig":{扩展":["react-app"，"react-app/jest"；]}，浏览器列表":{生产":[> 0.2％"，未死"，不是op_mini全部"；]，发展":[最后1个镀铬版本"，最新的1个Firefox版本"，最后1个野生动物园版本"]}}urls.py(在基本应用文件夹中)-
django.conf.urls中的导入URL从 .导入视图urlpatterns = [url('products/'，views.getProducts，name ="products")，url('products/< str:pk>/'，views.getProduct，name ="product")，url('routes/'，views.getRoutes，name ="routes")，]views.py-
来自django.shortcuts的导入渲染从django.http导入JsonResponse从rest_framework.decorators导入api_view从rest_framework.response导入响应从.products进口产品#在这里创建您的视图.@api_view(['GET'])def getRoutes(request):路线= ['/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>/'，]返回响应(路线)@api_view(['GET'])def getProducts(要求):返回响应(产品)@api_view(['GET'])def getProduct(request，pk):产品=无对于产品中的我:如果i ['_ id'] == pk:产品=我休息返回响应(产品)如果您看到此错误的任何解决方案，请告诉我.非常感谢您的最终回答.
解决方案此问题已通过将Django的版本从3.1.6更改为3.1.4来解决，而我也对此进行了更改-
django.conf.urls中的导入URL从 .导入视图urlpatterns = [url('products/'，views.getProducts，name ="products")，url('products/< str:pk>/'，views.getProduct，name ="product")，url('routes/'，views.getRoutes，name ="routes")，]返回至此-
django.urls导入路径中的从 .导入视图urlpatterns = [path('products/'，views.getProducts，name ="products")，path('products/< str:pk>/'，views.getProduct，name ="product")，path('routes/'，views.getRoutes，name ="routes")，]this post is the third part of the following series - (You can skip these first two parts, however - it can serve as a reference)
- A large number of problems with React, Django, Django REST and Axios
- Products on the homepage are not being displayed properly (Django, Django Rest and React)
- (React and Django) Displaying products on the homepage is working fine, but when I click on any particular product, then the rendering is wrong
(Note: The code of HomeScreen.Js and ProductScreen.js is updated in this third part, so it is different from the codes of these files, which are being shown in the first two parts)
My homepage looks like this -
But when I click on any particular product, I get this result -
I was consulting this issue with my friend, who has told me, that my React code should be fine and the problem should be somewhere inside the Django.
When I am checking my command prompt (from which I am running my Django server) - I am getting this output, when trying to display the product number 1 - [11/Mar/2021 19:18:05] "GET /api/products/1 HTTP/1.1" 200 2123
Please take a look at the code and maybe You will be able to find some hidden bug.
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;ProductScreen.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;package.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 (inside the base app folder) -
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"), ]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)Please let me know, if You see any solution to this bug. Thank You very much for Your eventual answer.
解决方案This problem was solved by changing Django´s version from 3.1.6 to 3.1.4 and I have also changed this -
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"), ]back to this -
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"), ]这篇关于(React和Django)在主页上显示产品工作正常，但是当我单击任何特定产品时，渲染是错误的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
