Невозможно прочитать свойства неопределенного (чтение 'map') в react js с бэкендом django

Я хочу получить изображение моего продукта категории 'Jeans' из django с помощью DRF в мой react frontend. Модель продукта выглядит так: (некоторые поля опущены для простоты) 

class Product(models.Model):
    product_image = models.ImageField(upload_to='product_image', blank = True)

Сериализатор выглядит так:

class ProductSerializer(serializers.ModelSerializer):     
    class Meta: 
        model= Product 
        fields = ['product_image',]

Вид выглядит как

class ProductView(APIView):
    permission_classes = [IsAuthenticated]
    def get(self, request):
        Jeans = Product.objects.filter(category='Jeans')
        serializer = ProductSerializer(Jeans, many=True )
        return Response(serializer.data, status=status.HTTP_200_OK)

затем, используя RTK API запрос, генерируются крючки для GET запроса, и я получаю ответ (в Postman) типа:

[
    {
        "product_image": "/media/product_image/jeans1_bsV3Jdg.jpg"
    },
    {
        "product_image": "/media/product_image/jeans2_76nciTn.jpg"
    },
    {
        "product_image": "/media/product_image/jeans3_SlMg4rG.jpg"
    }
]

Но когда я пишу код в React вот так

import React, {useState, useEffect } from 'react'
import { useGetLoggedUserProfileDataQuery, useGetProductDataQuery } from './services/UserAuthApi'
import { getToken, removeToken } from './services/LocalStorageService'; 

const Product = () => {
    const {access_token} = getToken()
    const productimage = useGetProductDataQuery(access_token)
  return (
    <>
    {
        productimage.data.map((img)=>{
            <h1>{img.product_image}</h1>
        })
    }            
    </>  
  )
}

export default Product

Я получил следующую ошибку:

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

также при выполнении consolo.log(product_image), я получил в консоли следующее:

{status: 'fulfilled', endpointName: 'getProductData', requestId: 'oUVEcITKdMPJtGZ-Pod9P', originalArgs: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90e…I6MX0.9K9THmN--5WnBQX0i5n5XUXUb9bqqslRCqf7A2Smyj4', startedTimeStamp: 1659459361351, …}
currentData: (3) [{…}, {…}, {…}]
data: Array(3)
0: {product_image: '/media/product_image/jeans1_bsV3Jdg.jpg'}
1: {product_image: '/media/product_image/jeans2_76nciTn.jpg'}
2: {product_image: '/media/product_image/jeans3_SlMg4rG.jpg'}
length: 3
  [[Prototype]]: Array(0)

Я просто хочу получить изображение продукта в react frontend используя метод map. Пожалуйста, помогите мне

Возможно, http-запрос не был завершен до того, как DOM попытается отобразить изображения, поэтому он говорит, что значение имеет тип None.

Я обхожу это, используя троичный оператор в возврате, который проверяет, есть ли значение в productimage. Если есть, отобразить его/наложить на него карту. Если нет, отобразить что-то другое (например, вращающееся колесо или текст типа "..."

).

Это будет выглядеть примерно так:

  const displayImg = (img) => {
   return(
   <h1>{img.product_image}</h1>
   )
  }

return (
    {productImage.data ? (
      productImage.data.map((img) => displayImg(img))
    ) : (
      <h1>loading...</h1>
    )}
)

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