Reactjs 在React with React挂钩上使用动态导入视频

我正在制作一个以全屏视频为背景的个人网站。而且我需要为不同的屏幕大小加载不同的视频。我正在使用React，并基于React钩子创建一个组件

以下是我的依赖项版本：

    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",

在我的组件“VideoBackground”中，我使用useState创建了一个状态，我将在其中存储视频源和海报图像源，如下所示：

const[video，setVideo]=useState({
发信人:null,，
src:null，
});

我使用useEffect钩子作为componentDidMount函数，根据窗口宽度动态加载视频，并向浏览器中的事件侦听器添加一个函数，以便在每次调整大小时重新加载视频：

useffect（（）=>{
异步函数handleResize（）{
setVideo（wait loadVideo（））；
}
handleResize（）；
addEventListener（“调整大小”，handleResize）；
window.addEventListener（“方向更改”，handleResize）；
return（）=>{
removeEventListener（“resize”，handleResize）；
removeEventListener（“方向更改”，HandlerResize）；
};
}, []);

基于windows宽度动态加载视频的函数“loadVideo”是一个异步函数，因为我使用的是React提供的Dinamic导入语法，这是一个承诺（我想这是最大的问题）。这是我的完整组件，“loadVideo”功能位于开头：

“/styles”文件是一个基于样式化组件库的组件，我用它来设置html的样式，这没关系（我想）。但是“视频”组件是HTML5中的视频标签

import React，{useState，useffect}来自“React”；
从“道具类型”导入道具类型；
从“/styles”导入{视频、覆盖、内容}；
const VideoBackground=（{children}）=>{
/*
*资源的预期媒体的媒体查询；该查询应仅在元素中使用
*
*超大设备（大型笔记本电脑和台式电脑，1200像素及以上）
*大型设备（笔记本电脑/台式机、992px及以上）
*中型设备（横向平板电脑、768px及以上）
*小型设备（肖像平板电脑和大型手机，600px及以上）
*超小型设备（手机，600px及以下）
*/
异步函数loadVideo（）{
const{width}=getWindowDimensions（）；
让后人妥协；
让我们承诺；
如果（宽度>1280）{
posterPromise=import（“../../assets/images/code720.jpg”）；
srcPromise=import（“../../assets/videos/code720.mp4”）；
}否则，如果（宽度>720）{
posterPromise=import（“../../assets/images/code480.jpg”）；
srcPromise=import（“../../assets/videos/code480.mp4”）；
}否则，如果（宽度>480）{
posterPromise=import（“../../assets/images/code320.jpg”）；
srcPromise=import（“../../assets/videos/code320.mp4”）；
}否则{
posterPromise=import（“../../assets/images/code240.jpg”）；
srcPromise=import（“../../assets/videos/code240.mp4”）；
}
const[{default:poster}，{default:src}]=wait Promise.all([
事后承诺，
我保证，
]);
返回{
海报，
src，
};
}
/*
*它返回窗口内容区域的宽度
*/
函数getWindowDimensions（）{
const{innerWidth:width}=窗口；
返回{
宽度，
};
}
const[video，setVideo]=使用状态({
发信人:null,，
src:null，
});
useffect（（）=>{
异步函数handleResize（）{
setVideo（wait loadVideo（））；
}
handleResize（）；
addEventListener（“调整大小”，handleResize）；
window.addEventListener（“方向更改”，handleResize）；
return（）=>{
removeEventListener（“resize”，handleResize）；
removeEventListener（“方向更改”，HandlerResize）；
};
}, []);
console.log（“返回前”，视频）；
返回(
{儿童}
);
};
VideoBackground.propTypes={
子项：PropTypes.node.isRequired，
};
导出默认视频背景；

问题是背景视频没有播放。但是海报图像出现了，我不知道为什么只有海报图像起作用。 我将console.log放在返回之前，试图找出发生了什么，下面是记录的内容：

BEFORE RETURN {poster: null, src: null}
BEFORE RETURN {poster: null, src: null}
BEFORE RETURN {poster: "/static/media/code720.e66bf519.jpg", src: "/static/media/code720.83f62f35.mp4"}
BEFORE RETURN {poster: "/static/media/code720.e66bf519.jpg", src: "/static/media/code720.83f62f35.mp4"}

如您所见，视频和图像正常加载（但在一段时间后）。我认为问题在于“useState”第一次为我的状态属性指定了一个空值，紧接着，“useEffect”调用了“loadVideo”函数

我第一次尝试导入视频并将其分配给“useState”，正常工作但是，我不能让视频以“useState”开头，因为我需要在下载之前知道屏幕大小并下载相应的视频

我还尝试将“loadVideo”功能与“useState”一起使用，如下所示：

const[video，setVideo]=useState（loadVideo（））；

但是，它不起作用，因为“loadVideo”是异步的

有没有人能解决这个问题，或者有更好的方法来实现我的目标？

谢谢大家!

import（）

没有加载视频，它只是获取URL。你可以同步完成

import videoSrc720 from "../../assets/videos/code720.mp4";

if (width>1280) {
    src = videoSrc720;
} ...

import（）

没有加载视频，它只是获取URL。你可以同步完成

import videoSrc720 from "../../assets/videos/code720.mp4";

if (width>1280) {
    src = videoSrc720;
} ...

---

此错误也出现在我的控制台上：./src/components/VideoBackground/index.js第77:6行：React Hook useffect缺少依赖项：“loadVideo”。包括它或删除依赖项数组react hooks/depst此错误也出现在我的控制台上：./src/components/VideoBackground/index.js第77:6行：react Hook useffect缺少依赖项：“loadVideo”。包括它或删除依赖项数组react hooks/dep