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

问题描述

我的知识鸿沟在于了解如何正确使用异步，以使对象'const videoJsOptions'的属性'src'具有正确的值。

import React,{ Component } from 'react';
import './CenterBlock.css';

class CenterBlock extends Component {
    state = {
        styling: {
            margin: 'auto'
        }
    }

    render() {
        return (
            <div className="center__block__container" style={this.state.styling}>
                <div className="block">
                    <h1>Generate Password</h1>
                </div>
            </div>
        );
    }
}

export default CenterBlock;

因此，通过以下行在页面上呈现/显示的内容：

状态值：{state.vidSrc}

是一个完全有效的URL。如果我将该URL硬编码为字符串，以替换行上的变量：

src：state.vidSrc， 那么video.js播放器就可以正常工作了。

我认为'const videoJsOptions'可能过早传递给VideoPlayer组件，但是我不知道该如何解决，也就是说，让它等到以后，例如该行：

状态值：{state.vidSrc}

显示

。

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

解决方法

为什么不进行条件渲染，

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

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