时间戳

首页 > 解决方案 > window.Calendly.initInlineWidget 在首次加载时未定义，但在 React 和 Gatsby 中使用 useEffect 刷新后工作

javascript - 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

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

标签： javascriptreactjsundefinedgatsbycalendly

解决方案

马歇尔从卡兰德利来。由于您使用的是 React 和 Gatsby，因此您可以使用react-calendly包将内联嵌入加载到您的网站上。

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

import { InlineWidget } from "react-calendly";

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

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

我希望这有帮助！更多文档可以在 Github 上的包自述文件中找到。

推荐阅读