动态表单仅在刷新时显示答案

【问题标题】：Dynamic form only shown on refresh动态表单仅在刷新时显示
【发布时间】：2021-02-11 23:17:55
【问题描述】：

我遇到了一个问题，即客户向我提供了第三方 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 使用表单路由到页面的方式。

有人可以帮忙吗？

【问题讨论】：

对于任何有同样问题的人，我在这里找到了解决方案：stackoverflow.com/questions/56943000/…

标签： reactjs marketo

【解决方案1】：

当具有该表单的组件挂载时，您可能需要调用该 .loadForm 函数。

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

如果它只是在 site.js 中被调用，它可能是在表单元素出现在 DOM 中之前被调用的，因此它没有任何附加内容。

我不久前创建了这个示例，将其留在这里以防万一：https://github.com/CharlieDieter/react-marketo-hook

【讨论】：