在 react.js 中，如何为 video.js 对象异步分配源属性

Question

我的知识差距是理解如何正确使用异步以获得对象 'const videoJsOptions' 的属性 'src' 的正确值。

import React, { useEffect, useState } from 'react';
import VideoPlayer from "./VideoPlayer";
import Amplify, { Storage } from 'aws-amplify';

function VideoPlayerPage () {
    const [state, setState] = React.useState({ vidSrc: "" })

    useEffect(() => {
        async function getURI() {
        try {
            const value = await Storage.get("andy_2020_something_description.mp4");
                    console.log(value);
            setState({ vidSrc: value });
        } catch (error) {
      console.log(error);
          } 
        }
        getURI();
    }, [] );

    const videoJsOptions = {
        autoplay: true,
        controls: true,
        sources: [{
// If I replace the reference to state on the line below with a string of the URL then the video.js player will work fine.
            src: state.vidSrc,
            type: 'video/mp4'
        }]
    }

    return (
        <div>
            <h1> value of state: { state.vidSrc } </h1>
            <VideoPlayer {...videoJsOptions} />
        </div>
    )
}

export default VideoPlayerPage

那么页面上的 rendered/displayed 是什么：

value of state: { state.vidSrc }

是完全有效的 URL。如果我将此 URL 硬编码为字符串以替换行中的变量：

src: state.vidSrc, then the video.js player works fine.

我在想 'const videoJsOptions' 可能过早地传递给了 VideoPlayer 组件，但我不知道如何解决这个问题，也就是说，让它等到稍后，例如当行：

value of state: { state.vidSrc }

显示。

非常感谢进一步调试的想法。

Answer 1

你为什么不做条件渲染，

 { state.vidSrc && <VideoPlayer {...videoJsOptions} /> }

这将确保播放器仅在正确的值可用后才呈现

在 react.js 中，如何为 video.js 对象异步分配源属性

In react.js how can you asynchronously assign source attribute for video.js object

javascript

video.js

reactjs

aws-amplify

value of state: { state.vidSrc }

value of state: { state.vidSrc }