Question

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

{
  "fulfillmentText": "My train is in Hyderabad",
  "fulfillmentMessages": [
    {
      "card": {
        "title": "card title",
        "subtitle": "card text",
        "imageUri": "https://assistant.google.com/static/images/molecule/Molecule-Formation-stop.png",
        "buttons": [
          {
            "text": "button text",
            "postback": "https://assistant.google.com/"
          }
        ]
      }
    }
  ]
}

第二个调用返回undefined，而第一个调用返回所需的对象。附：我也在使用电子

Answer 1

通过查看您发布的内容，我无法说清楚。如果您可以在此处发布完整的组件，我将能够进一步为您提供帮助。

<强>更新看起来解决方案是为加载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中编写它时没有对此进行过测试。但逻辑应该有效。

在componentDidMount（）中调用时API无法正常工作

1 个答案: