Reactjs 在componentDidMount（）中调用时API不工作

因此，我尝试使用Google API初始化我的一个react组件
我能够在绑定到按钮的函数调用中使用api，但在componentDidMount（）中调用时它无法工作

var容器；
类LandingPage扩展了React.Component{
建造师（道具）{
超级（道具）；
}
listTaskLists=（）=>{
log（window.gapi.client.tasks）；
window.gapi.client.tasks.tasklists.list({
“maxResults”：10
}).然后（功能（响应）{
var l=''；
var taskLists=response.result.items；
if（taskLists&&taskLists.length>0）{
对于（var i=0；i0）{
//对于（var i=0；i

第二个调用返回未定义的对象，而第一个调用返回所需的对象。

---

顺便说一句，我也在使用electron

通过查看您发布的内容，我不能说太多。我将能够帮助你进一步，如果你可以张贴你的完整组件在这里

更新 看起来解决方案是在加载GoogleAPI时创建一个单独的状态

class Test extends Component {
  constructor() {
    super();
    this.setState({ gapiReady: false });
  }

  loadGapi() {
    const script = document.createElement("script");
    script.src = "https://apis.google.com/js/client.js";

    script.onload = () => {
      window.gapi.load('client', () => {
        window.gapi.client.setApiKey(API_KEY);
        window.gapi.client.load('youtube', 'v3', () => {
          this.setState({ gapiReady: true });
        });
      });
    };

    document.body.appendChild(script);
  }

  componentDidMount() {
    if (!this.state.gapiReady) {
      this.loadGapi();
    } else {
      console.log('gapi loaded');
    }
  }

  render() {
    if (this.state.gapiReady) {
     return (
       <h1>Hooray! it's loaded.</h1>
     );
    else return (<h1>waiting for gapi to load</h1>);
  };
}

类测试扩展组件{
构造函数（）{
超级（）；
this.setState（{gapiReady:false}）；
}
loadGapi（）{
常量脚本=document.createElement（“脚本”）；
script.src=”https://apis.google.com/js/client.js";
script.onload=（）=>{
window.gapi.load（'client'，（）=>{
window.gapi.client.setApiKey（API_键）；
window.gapi.client.load（'youtube'，'v3'，（）=>{
this.setState（{gapiReady:true}）；
});
});
};
document.body.appendChild（脚本）；
}
componentDidMount（）{
如果（！this.state.gapiReady）{
这是loadGapi（）；
}否则{
log（'gapi-loaded'）；
}
}
render（）{
if（本州gapiReady）{
返回(
万岁！上膛了。
);
否则返回（等待gapi加载）；
};
}

---

我在Stackoverflow中写的时候没有测试它。但是逻辑应该可以工作。

这应该是一个注释！我已经添加了整个组件，请有一个注释look@abhimanyuchaudhary是否调用了

组件didmount（）

？还是我误解了？正如我看到的“hg”一样，正在调用它在控制台中，我猜测Google API加载需要一段时间。因此，如果组件在Google API初始化之前加载，它将返回未定义的，反之亦然。您在哪里初始化Google API？

class Test extends Component {
  constructor() {
    super();
    this.setState({ gapiReady: false });
  }

  loadGapi() {
    const script = document.createElement("script");
    script.src = "https://apis.google.com/js/client.js";

    script.onload = () => {
      window.gapi.load('client', () => {
        window.gapi.client.setApiKey(API_KEY);
        window.gapi.client.load('youtube', 'v3', () => {
          this.setState({ gapiReady: true });
        });
      });
    };

    document.body.appendChild(script);
  }

  componentDidMount() {
    if (!this.state.gapiReady) {
      this.loadGapi();
    } else {
      console.log('gapi loaded');
    }
  }

  render() {
    if (this.state.gapiReady) {
     return (
       <h1>Hooray! it's loaded.</h1>
     );
    else return (<h1>waiting for gapi to load</h1>);
  };
}