React.js - 旋转微调器直到加载数据

Question

Spinner 旋转直到

title

、

content

和

video

（= 视频路径）被获取。所以这很好用。 首先加载文本数据（

title

和

content

），但视频仍然有点领先。我猜这是因为加载了视频路径，而不是实际的视频。

我发现

loadeddata event

附加到视频并在视频的第一帧可用时设置状态， 然后将其添加到： {!isLoading &&

videoLoaded

？ ：} 但问题是状态是从尚未渲染的

Content

组件设置的，所以我无法正确设置/读取状态。 这是我的代码：

import React, { useEffect, useState } from "react";
import axios from "axios";

function Post() {

  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [video, setVideo] = useState("");

  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {

    const searchParams = new URLSearchParams(document.location.search);

    axios.post("/post", {title: searchParams.get("post")})
    .then((res) => {        
        setTitle(res.data.title);
        setContent(res.data.content);
        setVideo(res.data.video);
        setIsLoading(true);
    });
  },[]);

  return (
    <>
    <div className="Post">
      <Navbar />
      <div className="main-post">
        {!isLoading ? <Spinner /> : <Content video={video} title={title} content={content} />}
      </div>
    </div>
    <Footer />
    </>
  )
}

const Spinner = () => {
  return(
    <img className="post-spinner" src={spinner} alt="" />
  )
}

const Content = ({video, title, content}) => {
  return(
    <div className="content">
      <video className="post-video" src={`/${video}`} loop autoPlay muted playsInline />
      <div className="post-title">{title}</div>
      <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content)}} />
    </div>
  )
}

export default Post;