Javascript 当console.logging窗口对象在组件内部时，它给出'；未定义'；。但在使用浏览器控制台时可以访问它

我想使用youtube API（）从附加的视频中获取当前时间。我想在另一个组件中使用这些信息，这就是为什么我要给窗口对象一个属性，这样我就可以在任何地方访问这些信息

代码：

  import React from 'react';

    class VideoSingle extends React.Component {
      constructor(props){
        super(props);
        this.state = {}
      }

      componentDidMount() {
       // 2. This code loads the IFrame Player API code asynchronously.
       var tag = document.createElement('script');

       tag.src = "https://www.youtube.com/iframe_api";
       var firstScriptTag = document.getElementsByTagName('script')[0];
       firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

       // 3. This function creates an <iframe> (and YouTube player)
       //    after the API code downloads.

       var YT;
       window.onYouTubeIframeAPIReady = function() {
         YT = window.YT;
         window.player = new YT.Player('videoplayer', {
           height: '390',
           width: '640',
           videoId: 'M7lc1UVf-VE',
           origin:'http://localhost:3001',
           events: {

           }

         });

       }

      }

      componentDidUpdate() {

        console.log(window.player,'logging window.player at componentDidUpdate')
      }
      render(){

        console.log(window.player,'logging window.player at render')


      return (
       //1. The <iframe> (and video player) will replace this <div> tag. 
        <div id="videoplayer"></div>

        );
      }
    };



export default VideoSingle;

从“React”导入React；
类VideoSingle扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}
}
componentDidMount（）{
//2.此代码异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
//3.此函数创建（和YouTube播放器）
//API代码下载后。
var-YT；
window.onYouTubeIframeAPIReady=函数（）{
YT=window.YT；
window.player=新的YT.player（'videoplayer'{
高度：“390”，
宽度：“640”，
videoId:'M7lc1UVf VE'，
来源：'http://localhost:3001',
活动：{
}
});
}
}
componentDidUpdate（）{
log（window.player，'logging window.player at componentdiddupdate'）
}
render（）{
log（window.player，'logging window.player at render'）
返回(
//1.标签（和视频播放器）将替换此标签。
);
}
};
出口违约单；

我尝试使用console.log的所有位置都给出了“未定义”（在示例I console.logged in component didmount and render中）：

但当我在浏览器控制台中输入window.player.getCurrentTime（）时，实际上我得到了一个值

我想了解如何在应用程序中的任何位置访问window.player.getCurrentTime（）

---

App repo:

YouTube脚本很可能在您登录后创建播放器。。。尝试渲染整个视图，然后渲染控制台日志。在你的代码中。。。下面几行没有意义。检查YT API参考

YT = window.YT;

---

这使得YT未定义。。。你的意思可能是说

window.YT=YT

？请仔细检查。祝你好运，随时与我们保持联系。

是的，你说得对，YouTube脚本在我登录之后创建了播放器，这就是为什么在代码执行期间它是“未定义”的，但在我登录浏览器控制台时它是正常的（因为代码完成了执行，所以它存在）。然后我意识到这很好，因为我要从表单提交window.player.getCurrentTime（）。当从表单提交时，window.player对象将存在，所以我不会有任何问题。谢谢你的洞察力。