reactjs - 在 componentDidMount() 中调用 API 不工作

问题描述

所以我试图通过使用 Google API 来初始化我的一个反应组件
我能够在绑定到按钮的函数调用中使用 api，但是在 componentDidMount() 中调用时它不起作用

var container;
class LandingPage extends React.Component {
  constructor(props) {
    super(props);
  }
  listTaskLists = () => {
    console.log(window.gapi.client.tasks);
    window.gapi.client.tasks.tasklists.list({
        'maxResults': 10
    }).then(function(response) {
      var l = '';
      var taskLists = response.result.items;
      if (taskLists && taskLists.length > 0) {
        for (var i = 0; i < taskLists.length; i++) {
          var taskList = taskLists[i];
          console.log(taskList.title);
        }
      } else {
        console.log("TNo Tasks")
      }
    });

  }
  componentDidMount() {
    container = this;
    console.log("hg");
    console.log(window.gapi.client.tasks);
      // window.gapi.client.tasks.tasklists.list({
      //     'maxResults': 10
      // }).then(function(response) {
      //   // appendPre('Task Lists:');
      //   var l = '';
      //   var taskLists = response.result.items;
      //   if (taskLists && taskLists.length > 0) {
      //     for (var i = 0; i < taskLists.length; i++) {
  //       var taskList = taskLists[i];
  //       console.log(taskList.title);
  //     }
  //   } else {
  //     console.log("TNo Tasks")
  //   }
  // });
  }




   render () {
    return (
          <div id = "LandingPageMain" style = 
{{height: '414px'}}>
      <Grid container wrap="nowrap" spacing={40} 
alignContent="center" justify ="center" 
alignItems="center" direction="column">
        <Grid item>
                   <img style={{width: '80px', height: '80px'}} src={Icon}/>
        </Grid>
        <Grid item>
            <Typography variant="display1" align="center" component="h3">
              TASKS
            </Typography>
        </Grid>
        <Grid item>
            <Link to={{ pathname: "/TasksPage", state: { listId: 'MTI1NzMwMjIzNjgxNDAwMDExMjM6MDow'} }}>
               <Button variant="contained">TasksPage</Button>
             </Link>
        </Grid>
        <Grid item>
            <Link to = "/ListsPage">
               <Button variant="contained">ListsPage</Button>
            </Link>
        </Grid>
         <Grid item>
                <Button variant="contained" onClick={this.listTaskLists}>Test</Button>
         </Grid>
       </Grid>
       </div>
        );

   }
  }

第二次调用返回未定义，而第一次调用返回所需的对象。PS我也在使用电子

标签： reactjsgoogle-apielectron

看你发的帖子我也说不上来。如果您可以在此处发布完整的组件，我将能够为您提供进一步的帮助。

更新看起来解决方案是在加载 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>);
  };
}

当我在 Stackoverflow 中编写它时，我还没有对此进行测试。但逻辑应该有效。

reactjs - 在 componentDidMount() 中调用 API 不工作

问题描述

解决方案

推荐阅读