Полученные данные Json из API не определены

Я пытаюсь заполнить страницу подробного описания товара данными, полученными из моего API с помощью хуков useEfect() и useState() в ReactJS, но каждый раз, когда я хочу вывести в консоль полученный объект, он выдает мне сообщение undefined, пожалуйста, помогите мне .

API-модель:

from django.db import models

class Product(models.Model):
    id = models.IntegerField(null=False, default=0, primary_key=True)
    product_name = models.CharField(max_length=60, null=False, default='no name')
    category = models.CharField(max_length=60, null=False, default='misc_product')
    author = models.CharField(max_length=60, null=False, default='anonim')
    collection = models.CharField(max_length=60, null=False, default='anonim')
    family = models.CharField(max_length=60, null=False, default='anonim')
    image_path = models.CharField(max_length=160, null=False, default='')
    likes_no = models.IntegerField(null=False, default=0)
    price = models.FloatField(null=False, default=0.00)

   def __str__(self):
     return self.product_name`

API Serializer

from rest_framework import serializers
from .models import Product


class ProductSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Product
        fields = (
            'id',
            'product_name',
            'category',
            'author',
            'collection',
            'family',
            'image_path',
            'likes_no',
            'price',
       )

API Views

from rest_framework import viewsets
from rest_framework.views import APIView
from .serializers import ProductSerializer
from .models import Product
from rest_framework.response import Response
from rest_framework import status


class ProductViewSet(APIView):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer

    @classmethod
    def get_extra_actions(cls):
        return []

    def post(self, request):
        serializer = ProductSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response({"status": "success", "data": serializer.data},      status=status.HTTP_200_OK)
        else:
            return Response({"status": "error", "data": serializer.errors}, status=status.HTTP_400_BAD_REQUEST)

    def get(self, request, id=None):

        if id:
            item = Product.objects.get(id=id)
            serializer = ProductSerializer(item)
            return Response(serializer.data, status=status.HTTP_200_OK)

        items = Product.objects.all()
        serializer = ProductSerializer(items, many=True)
        return Response(serializer.data, status=status.HTTP_200_OK)

СКРИПТREACT.JS

import React,{ useEffect, useState } from 'react'
import { MessageElement } from './Elements'
import { useParams} from "react-router-dom"
import axios from 'axios'






function DetailProductPage() {
    
        const productId = useParams().productId
    

        const [product, setProduct] = useState([])
        const URL = `http://url/api/products/${productId}`
       
        useEffect(() => {
           axios.get(URL)
            .   then((response) => {
                    setProduct(response.data[0])
                    console.log(product)            
            });
    }, [])
    
        return (
        
            <MessageElement>Detail Page</MessageElement>
            )
< 
export default DetailProductPage

RESULT Вот результат, который я получаю при запуске приложения

PS: Я использую два терминала, первый для API, а второй для React Application

setProduct(response.data[0]) является асинхронным методом, и поэтому при попытке увидеть значение в product через консольный журнал консоль выдаст undefined. Если вы действительно хотите увидеть ответ от api или узнать, устанавливается ли продукт в состоянии. Вы можете попробовать следующий код.

import React,{ useEffect, useState } from 'react'
import { MessageElement } from './Elements'
import { useParams} from "react-router-dom"
import axios from 'axios'

function DetailProductPage() {
    
        const productId = useParams().productId
    

        const [product, setProduct] = useState([])
        const URL = `http://url/api/products/${productId}`
       
        useEffect(() => {
           axios.get(URL)
            .   then((response) => {
                    console.log('response from api', response.data[0]);
                    setProduct(response.data[0])
                               
            });
    }, [])
        console.log("product set in state", product) 
        return (
        
            <MessageElement>Detail Page</MessageElement>
            )
}
Вернуться на верх