window.Calendly.initInlineWidget 未在首次加载时定义，但在 React 和 Gatsby 中使用 useEffect 刷新后有效

Question

我正在将 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",
      },
    }

Answer 1

Marshall 来自 Calendly。由于您使用的是 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.

中找到更多文档

window.Calendly.initInlineWidget 未在首次加载时定义，但在 React 和 Gatsby 中使用 useEffect 刷新后有效

window.Calendly.initInlineWidget is not defined on first load but works after refresh with useEffect in React and Gatsby

javascript

undefined

reactjs

gatsby

calendly