Question

我是React的新手。

我正在尝试使用React更新视频源。一切顺利，但我必须单击两次按钮才能加载视频。我不确定是什么造成的。

这是我的代码。

class Dashboard extends React.Component {
    constructor() {
        super();
        this.chooseVideo = this.chooseVideo.bind(this);
        this.state = {
            videoPreviewUrl: ''
        }
    }
    chooseVideo (fileUrl) {
        this.setState({videoPreviewUrl: fileUrl});
        var vid = document.getElementById('videoPreview');
        vid.load();
    }

    render() {
        return <div>
                <VideoEditor url={this.state.videoPreviewUrl}/>
            </div>
    }
}


class VideoEditor extends React.Component {
    render () {
        return <div id="videoEditorPane" className="col-md-9">
            <div className="row">
                <div className="col-md-6">
                    <video id="videoPreview" preload="auto" width="640" height="480">
                        <source src={this.props.url} type="video/mp4" />
                    </video>
                    <StoryBoard/>
                </div>
            </div>
        </div>;
    }
}

方法chooseVideo正在正确传递视频的网址。所以，我以为我只会改变它的状态。当我看到DOM的源代码时，视频源会正确更改。但是，我必须点击两次。我不确定这是this.State()和vid.load()之间的竞赛问题吗？

Answer 1

将vid.load（）放在VideoEditor中的componentWillReceiveProps（nextProps）中。这样你就可以避免计时问题。

如何使用Facebook React更新视频源？

1 个答案: