window.Calendly.initInlineWidget 不是在第一次加载时定义的，而是在 React 和 Gatsby 中使用 useEffect 刷新后工作

如何解决window.Calendly.initInlineWidget 不是在第一次加载时定义的，而是在 React 和 Gatsby 中使用 useEffect 刷新后工作

我正在将 Gatsby 与 React 结合使用，并且正在尝试实施 Calendly 预订系统。它有点工作。问题是在第一次加载时它给了我错误

TypeError: Cannot read property 'initInlineWidget' of undefined

在这里看到

如果我刷新页面，Calendly 对象加载并呈现就好了。

我想知道是否可以在 useEffect 中做些什么来避免这个问题。

    import React,{ useEffect } from "react"
    import Layout from "../components/layout"
    
    const Calendly = styled.div`
      height: 800px;
      margin-top: 100px;
    `
    
    const IndexPage = ({ data }) => {
      useEffect(() => {
        window.Calendly.initInlineWidget({
          url: "https://calendly.com/absolute-hardwood",parentElement: document.getElementById("bookingjs"),prefill: {},utm: {},})
      },[])
    
      return (
        <Layout>
          <Calendly id="bookingjs" />
        </Layout>
      )
    }
    
    export default IndexPage

这是我在 gatsby-confing.js 中添加 Calendly 脚本的方法

    {
      resolve: "gatsby-plugin-load-script",options: {
        src: "https://assets.calendly.com/assets/external/widget.js",},}

解决方法

来自 Calendly 的 Marshall。由于您使用的是 React 和 Gatsby，因此您可以使用 react-calendly 包来加载您网站上的内嵌嵌入。

您需要在项目中安装 react-calendly 包，然后像这样在文件顶部导入 InlineWidget：

import { InlineWidget } from "react-calendly";

然后，您可以在您的页面上使用该组件：

<InlineWidget url="https://calendly.com/your_scheduling_page" />

我希望这会有所帮助！可以在 the package readme on Github 中找到更多文档。