从 API 获取的 Json 数据未定义

Question

我正在尝试使用 ReactJS 中的 useEfect() 和 useState() 挂钩使用从我的 API 获取的数据填充详细产品页面，但每次我想打印到控制台时，对象都会获取它给我一条未定义的消息，请帮助我。

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 序列化器

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 观看次数

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

结果This is the result i get when i run the app

PS：我使用两个终端，第一个用于 API，第二个用于 React Application

Answer 1

setProduct(response.data[0]) 是一种异步方法，因此当尝试通过控制台日志查看产品中的值时，控制台会给出 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);
                    setProduct(response.data[0])
                               
            });
    }, [])
        console.log("product set in state", product) 
        return (
        
            <MessageElement>Detail Page</MessageElement>
            )
}

从 API 获取的 Json 数据未定义

Fetched Json data from API is undefined

api

django

reactjs

react-hooks