javascript - 在 react 组件内等待来自非 react 源的请求

Question

我在我的 React 组件中使用了 calendly API

我尝试过这段代码:

import React, { Component } from 'react'
import FullScreenModal from '../../../UIComponents/FullScreenModal'

export default class MeetingBooking extends Component {


    state={
        isLoading: false
    }
componentDidMount() {
    console.log(this.state.isLoading)
    const head = document.querySelector('head');
    const script = document.createElement('script');
    script.setAttribute('src',  'https://assets.calendly.com/assets/external/widget.js');
    head.appendChild(script);
    this.setState({loading: false})
}


    render() {
        console.log(this.state.isLoading)
        return (
            <FullScreenModal open={this.props.open} title={"Book a Meeting"} handleClose={this.props.handleClose}>
            {this.state.isLoading ?
            <p>Loading...!!!!</p> : 
            <div
             className="calendly-inline-widget" 
             data-url="https://calendly.com/kristofferlocktolboll"
             style={{minWidth: '320px', height: '580px'}}>
             </div> 
            }
             </FullScreenModal>

        )
    }
}

问题是我无法像使用 Axios 那样等待来自 URL 的请求。或fetch API请求，因此每当插入脚本时，甚至不会显示加载组件。

所以我正在寻找某种方法来监听注入(inject)的 JavaScript，并等待它，这样我就可以显示我的 <p>Loading....!!!!</p>同时，这可以实现吗？

Answer 1

您可以添加load <script> 的事件监听器元素，这是一个示例:

export default class MeetingBooking extends Component {

  state = {
    isLoading: false
  }

  componentDidMount() {
    this.setState({ isLoading: true }, () => {
      const script = document.createElement('script');
      script.type = 'text/javascript';

      script.onload = () => this.setState({ isLoading: false });

      script.src = 'https://assets.calendly.com/assets/external/widget.js';
      document.head.appendChild(script);
    });
  }
}