動態表單僅在刷新時顯示

Question

我遇到了一個問題，客戶向我提供了第三方 Marketo 表單，以包含在我正在構建的頁面之一上，該頁面在本地測試時適用於“正常”html 頁面，但是在 Gatsby 上，它不起作用. 提供的腳本如下：

<script src="//app-xxxx.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_xxxx"></form>
<script>MktoForms2.loadForm("//app-xxxx.marketo.com", "xxx-xxx-xxx", xxxx);</script>

我已將頂部腳本標記添加到gatsby-ssr.js 中，如下所示：

import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="mktoForm_test"
      src="//app-sjst.marketo.com/js/forms2/js/forms2.js"
    />,
    <script
      key="/js/site.js"
      src="/js/site.js"
    />
  ])

我已將以下內容添加到/static/js/site.js以初始化表單：

MktoForms2.loadForm("//app-xxx.marketo.com", "xxx-xxx-xxx", xxxx);

然后，在我想要表單的頁面上，我添加了這個：

<form id="mktoForm_xxxx"></form>

該表單僅在我在頁面上並手動刷新瀏覽器時顯示。 從任何其他頁面單擊進入該頁面根本不會呈現表單。 我猜這是 Gatsby/React 如何使用表單路由到頁面的方式。

有人可以幫忙嗎？

Answer 1

當具有該表單的組件安裝時，您可能需要調用 that.loadForm function。

React.useEffect(() => {
// load form here...
}, []

如果它只是在 site.js 中被調用，它可能是在表單元素出現在 DOM 中之前被調用的，因此它沒有任何附加內容。

我剛才創建了這個例子，把它留在這里以防萬一它有額外的幫助： https://github.com/CharlieDieter/react-marketo-hook