UseState не работает, отображается превью-фотография товара

WEBSITE GIF

Привет,

Я делаю сайт электронной коммерции, используя react.js и django DRF. вот проблемы...

1.

как вы можете видеть gif, я попытался реализовать функцию, которая изменяет репрезентативную картинку

когда я нажимаю на маленькие изображения, используя useState... Однако, когда я обновляю страницу,

репрезентативная картинка исчезает.

2. когда я нажимаю на другой продукт, он показывает продукт превью, на который я нажал...

Вот мое определение принципа движения.

В двух действиях вызовите данные из api и сохраните их в каждой переменной.

используйте функцию useState() для отображения представительного изображения, а когда я нажимаю на другие изображения,

useState собирается изменить src url изображения... и у меня проблемы...

Я знаю, что это беспорядочные и длинные коды... пожалуйста, помогите мне... спасибо!

< <

class Product(models.Model):

name = models.CharField(max_length=255, blank=False)
category = models.ManyToManyField(ProductCategory)
thumbnail_image = models.ImageField(null=True, blank=True)
discription = models.TextField(null=False, blank=False)
price = models.DecimalField(max_digits=20, decimal_places=2, null=False, blank=False)
stock = models.IntegerField(default=0)
tag = models.CharField(max_length=255, null=True, blank=True)
date = models.DateTimeField(auto_now=True)
enable = models.BooleanField(default=True)

    def image_tag(self):
        if self.thumbnail_image:
            return mark_safe('<img src="%s" style="width: 45px; height:45px;" />' % 
            self.thumbnail_image.url)
        else:
            return 'No Image Found'
            image_tag.short_description = 'Image'

   def __str__(self):
       return self.name

class ProductImages(models.Model):
    product = models.ForeignKey(Product, on_delete=models.CASCADE, null=True, blank=True)
    images = models.ImageField(null=True, blank=True)

    def __str__(self):
        return str(self.images)

<

@api_view(['GET'])
def ProductImage(request,pk):
    if request.method == 'GET':
        images = ProductImages.objects.filter(product=pk)
        serializer = ProductImagesSerializer(images, many=True)
        return Response(serializer.data)

<

import {
PRODUCT_REQUEST,
PRODUCT_SUCCESS,
PRODUCT_FAIL,

PRODUCT_IMAGES_REQUEST,
PRODUCT_IMAGES_SUCCESS,
PRODUCT_IMAGES_FAIL
} from '../constants/ProductConstants'

export const ProductDetailReducer = ( state ={ product:[] }, action ) =>{
  switch( action.type){
    case PRODUCT_REQUEST:
        return { loading: true, product: [] }
    
    case PRODUCT_SUCCESS:
        return { loading: false, product: action.payload }
    
    case PRODUCT_FAIL:
        return { loading: false, error: action.payload }

    default:
        return state
    }
    

}


export const ProductDetaiImagesReducer = ( state ={ images:[] }, action ) =>{

switch( action.type){
    case PRODUCT_IMAGES_REQUEST:
        return { loading: true, images: [] }
    
    case PRODUCT_IMAGES_SUCCESS:
        return { loading: false, images: action.payload }
    
    case PRODUCT_IMAGES_FAIL:
        return { loading: false, images: action.error }

    default:
        return state
    }
    

}

<

import axios from 'axios'
import {
PRODUCT_REQUEST,
PRODUCT_SUCCESS,
PRODUCT_FAIL,

PRODUCT_IMAGES_REQUEST,
PRODUCT_IMAGES_SUCCESS,
PRODUCT_IMAGES_FAIL
} from '../constants/ProductConstants'


export const ProductDetails = (id)=>async (dispatch) =>{

try{
    dispatch({type:PRODUCT_REQUEST})
    const { data } = await axios.get(`http://127.0.0.1:8000/api/product/${id}`)
    
    dispatch({
        type:PRODUCT_SUCCESS,
        payload: data
    })
}

catch{
    dispatch({
        type:PRODUCT_FAIL,
        error: 'Unable to retrieve the product.'
    })
}

views.py

}

export const ProductImagesDetails = (id)=>async (dispatch) =>{

try{
    dispatch({type:PRODUCT_IMAGES_REQUEST})
    const images = await axios.get(`http://127.0.0.1:8000/api/product_images/${id}`)
    dispatch({
        type:PRODUCT_IMAGES_SUCCESS,
        payload: images.data
    })
}

catch{
    dispatch({
        type:PRODUCT_IMAGES_FAIL,
        error: 'Unable to retrieve the product.'
    })
}

}

productDetail.js

}

Вернуться на верх