我已经创建了两个模型课程和视频。

`
class course(models.Model):
    course_name = models.CharField(max_length=80)
    course_disc = models.TextField(max_length=2000)
    course_status = models.CharField(max_length=256,choices=[('free','free'),('premium','premium')],default='free')
    course_img = models.ImageField(upload_to="img/",max_length=250,null=True,default=None)
    course_mode = models.CharField(max_length=256,choices=[('ongoing','ongoing'),('completed','completed')],default='ongoing') 

    def __str__(self):
        return self.course_name

class video(models.Model):
    video_title = models.CharField(max_length=300)
    video_discription = models.TextField(max_length=2000)
    video_path = models.FileField(upload_to='video/', null=True, verbose_name="")
    course_id = models.ForeignKey(course, default=None, on_delete=models.CASCADE)

    def __str__(self):
        return self.video_title
`

下面是我的课程和视频序列化器。这里course_id是指课程模型的外键。

`
class CourseViewSerializer(serializers.ModelSerializer):
    class Meta:
        model = course
        fields = ['id','course_name','course_disc','course_img','course_status']

class VideoViewSerializer(serializers.ModelSerializer):
    class Meta:
        model = video
        fields = ['video_title','video_discription','video_path','course_id']
`

我的views.py文件看起来像这样......在这里，两个类中的list函数获取所有记录，而retrieve将基于id获取记录。在ViewVideo retrieve函数中，它基于course_id获取所有记录。

`
class ViewCourse(viewsets.ViewSet):
   
    def list(self, request):
        queryset = course.objects.all()
        serializer = CourseViewSerializer(queryset, many=True)
        return Response(serializer.data)

    def retrieve(self, request, pk=None):
        queryset = course.objects.all()
        c = get_object_or_404(queryset, pk=pk)
        serializer = CourseViewSerializer(c)
        return Response(serializer.data)
        
class ViewVideo(viewsets.ViewSet):
    
    def list(self, request):
        queryset = video.objects.all()
        serializer = VideoViewSerializer(queryset, many=True)
        return Response(serializer.data)

    def retrieve(self, request, pk=None):
        queryset = video.objects.all()
        c = get_object_or_404(queryset, course_id=pk)
        serializer = VideoViewSerializer(c)
        return Response(serializer.data)
`

下面是运行此视频API后的输出...您可以看到URL，我在URL中传递course_id，它将向我返回与该course_id对应的视频，在我的示例中为6。URL：http://127.0.0.1:8000/video_course/6输出：关于django休息框架

`
{
    "video_title": "What is Figma?",
    "video_discription": "Figma Introduction with its features.",
    "video_path": "/media/video/videoplayback_EXzlZFT_it236nr.mp4",
    "course_id": 6
}
`

现在让我向您展示React方面...
实际上，我尝试在一个单独的React组件页面（即CourseDetails.js）中使用axios调用两个API。
CourseDetails.js组件的代码....

`

import React from 'react';
import { useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';
import axios from 'axios';
import { ReactSession } from 'react-client-session';

export default function CourseDetails() {

    const [coursedetail, setCoursesDetail] = useState([]);
    const [videos, setCourseVideo] = useState([]);

    let username =  ReactSession.get("user_name")
    let text = localStorage.getItem("user");
    let obj = JSON.parse(text)
    console.log(obj);

    const  URL = 'http://127.0.0.1:8000';

    let { id } = useParams();

    const getData = async () => {
        const { data } = await axios.get(`http://localhost:8000/view_course/${id}`);
        setCoursesDetail(data);
    };
    useEffect(() => {
      getData();
    });
    //Below commented api call results in blank screen on react side its not showing any  component rendering
    //when i am trying to call two apis' in a single page.

    const getVideo = async () => {
       const { videodata } = await axios.get(`http://localhost:8000/video_course/${id}`);
       setCourseVideo(videodata);
     };

     useEffect(() => {
        getVideo();
     });

     return(
       <div className="row justify-content-cener">
          <div className="col-lg-8">

           <h3 id="title">{videos.video_title}</h3>
  
           <video id='video' controls controlsList="nodownload" style={{"width" : "100%"}}>
               <source id="player" src={`${URL}${videos.video_path}`} type="video/mp4" />
           </video>
           <p id="desc" style={{"marginTop " : "10px", "fontSize" : "16px"}}> {videos.video_description}</p>
        </div>
)
}

`

这就是我尝试调用video_courseAPI的方式。
现在我的问题是...
如何使用axios在单个React组件中调用2个API，其中video_course api依赖于view_course api，因为外键？
我如何在我的Reactjsx中显示这个视频路径？我展示的显示视频路径的方式在jsx语法中是正确的吗？如果不是，那么请指导我。
还请帮助我如何URL将在响应端调用2个API后。
提前感谢您：）

最终解决方案：

为此，我必须创建DTO（数据传输对象）来检索相应课程的所有视频。

{
        "course_disc": "Figma is a very powerful application that runs online. There are virtually no platform boundaries when it comes to using figma because you can design within a web browser or using their desktop application made for windows and macs. Figma is similar to Sketch and Adobe XD but is the more powerful of the three when it comes to team collaboration and responsive, fast paced design. This course will cover user interface designing using the powerful tools within Figma.",
        "course_img": "img/figma-brands_6jR7YRb.png",
        "course_mode": "ongoing",
        "course_name": "Figma",
        "course_status": "premium",
        "videos": [
            {
                "video_discription": "Introduction Part 1",
                "video_path": "video/videoplayback_8vrcgxy_u5qBkNQ.mp4",
                "video_title": "What is Figma?"
            },
            {
                "video_discription": "Features of Figma Part 2",
                "video_path": "video/video1_HppJ0va.mp4",
                "video_title": "Figma Features"
            }
        ]
    }

这是我想要的实际输出。现在让我给你看我做的代码。
我创建了一个名为dtos的文件夹，其中存放了我的views.py文件。在dtos文件夹中，我创建了一个python文件CourseDto.py。在该文件中，下面是我编写的代码：

课程D至.py

import jsons

class VideoDto(jsons.JsonSerializable):
    
    def __init__(self, video):
        self.video_title = video.video_title
        self.video_discription = video.video_discription
        self.video_path = str(video.video_path)

class CourseDto(jsons.JsonSerializable):
    
    def __init__(self, course, videos):
        self.course_name = course.course_name
        self.course_disc = course.course_disc
        self.course_status = course.course_status
        self.course_img = str(course.course_img)
        self.course_mode = course.course_mode
        self.videos = list()
        
        for video in videos:
            self.videos.append(VideoDto(video))

现在，在serializers.py中，您只需要创建serializer来获取所有课程。（即，实际上在views.py文件中ViewCourse类的list函数中完成）

class CourseViewSerializer(serializers.ModelSerializer):
    class Meta:
        model = course
        fields = ['id','course_name','course_img','course_status']

现在，在views.py文件中，我的ViewCourse类是：

class ViewCourse(viewsets.ViewSet):
    def list(self, request):
        queryset = course.objects.all()
        serializer = CourseViewSerializer(queryset, many=True)
        return Response(serializer.data)
    def retrieve(self, request, pk=None):
        c = course.objects.get(pk=pk)
        videos = list(video.objects.filter(course_id=c.pk))
        dto = CourseDto(c, videos)
        return Response(dto.json)

然后在urls.py中创建url，如下所示：

path('view_course',ViewCourse.as_view({'get': 'list'})),
    path('view_course/<pk>',ViewCourse.as_view({'get': 'retrieve'}))

希望这对你有帮助。
谢谢你！