Блог

Я хочу передать несколько наборов запросов по одному и тому же URL-адресу или одному и тому же API. Я могу создать api с помощью django rest, и он работает как заклинание. В интерфейсе я использую ReactJS. На моем экране реакции я просто вызываю product.description, и у меня есть объект product, и я хочу сделать то же самое для моего связанного набора запросов. Если я позвоню родственникам.имя, то оно должно работать одинаково. Как я могу это сделать?? #это мой вызов api

 @api_view(['GET'])
def getProduct(request, pk):
    product = Product.objects.get(_id=pk)
    related = Product.objects.filter(category=product.category).exclude(_id=pk)[:4]
    print(related)
    serializer = ProductSerializer(product, many=False)
    return Response(serializer.data)
 

#это код экрана реакции

 import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Form, Button, Card, Modal } from 'react-bootstrap'
import Rating from '../components/Rating'
import Loader from '../components/Loader'
import Message from '../components/Message'
import products from '../products'
import { useDispatch, useSelector } from 'react-redux'
import { listProductDetails } from '../actions/productActions'
import { productDetailsReducer } from '../reducers/productReducers'
import {InlineShareButtons} from 'sharethis-reactjs';
import {InlineFollowButtons} from 'sharethis-reactjs';
import { addToCart, removeFromCart } from '../actions/cartActions'
import { LinkContainer } from 'react-router-bootstrap'
import { Container} from 'react-floating-action-button'
import Product from '../components/Product'


function ProductScreen({ match, history }) {
    

    // const [product, setProduct] = useState([])
    const cart = useSelector(state => state.cart)
    const { cartItems } = cart

    

    const removeFromCartHandler = (id) => {
        dispatch(removeFromCart(id))
    }


    const checkoutHandler = () => {
        history.push('/login?redirect=shipping')
    }

    const [show, setShow] = useState(false);

   

    const handleClose = () => setShow(false);

    const handleShow = () => setShow(true);




  
    
    const [qty, setQty] = useState(1)

    const dispatch = useDispatch()

    const productDetails = useSelector(state => state.productDetails)
    const {loading, error, product} = productDetails

    


    useEffect(() => {

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

        // fetchProduct()

    }, [dispatch, match])

    const addToCartHandler = () => {
        history.push(`/cart/${match.params.id}?qty=${qty}`)
    }
    
    return (
        <div>
            <Container>
             
  
           <Button
               tooltip="Cart"
               icon=""
               rotate={true}
               onClick={handleShow}
               className="btn btn-primary btn-circle btn-xl"><i className="fas fa-shopping-cart" style={{fontSize:23}}><sup className='shanto'>{cartItems.length}</sup></i></Button>
    </Container>
            <Link to='/' className='btn btn-light my-3'>Go Back</Link>
            {loading ?
                <Loader />
                : error
                    ? <Message variant='danger'>{error}</Message>
                :(
                            <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>
                                            Old Price: <strong className="tk">৳</strong><del> {product.old_price} </del>
                                        </ListGroup.Item>

                                        <ListGroup.Item >
                                            Discount: <b>{product.discount}%</b>
                                        </ListGroup.Item>

                                        <ListGroup.Item>
                                            Price: <strong className="tk">৳</strong> {product.price}
                                        </ListGroup.Item>


                                        <ListGroup.Item style={{color: 'red'}}>
                                            <p><b>{product.short_description}</b></p> 
                                        </ListGroup.Item>