如何在Gatsby中修复倍增Snipcart自定义html？

Question

我最近迁移了一个网站到Gatsbyv2，发现Snipcart的自定义html在事件happens.How之后会成倍增加。我会阻止Snipcart自定义HTML在每次页面导航或事件发生时成倍增加吗？当我打开模式时，多重渲染是可见的。我不确定这是React组件生命周期问题还是Gatsbyv2布局组件问题。

CustomSnipcartText组件使用componentDidMount调用Snipcart api，并使用这些方法将文本绑定到DOM。CustomSnipcartText组件被导入到Gatsby布局组件中。我已经尝试将组件导入到打开了模态函数的位置，但没有更改结果。

Snipcart自定义html组件：

  // Binds the Snipcart subscription services to the component
  componentDidMount() {
  /* global Snipcart:false */
    Snipcart.execute('bind', 'cart.opened', function() {
      Snipcart.execute('unbind', 'cart.opened')
      /* global $: false */
      let html = $('#cart-content-text').html()
      $(html).insertBefore($('#snipcart-footer'))
    })
  } ....

GatsbyJs布局组件：

export default class Layout extends Component {
  render() {    
    return (
      <div className="wrapper">
        <CustomSnipcartText /> ...

我希望CustomSnipcartComponent在任何事件发生后都不会成倍增长。

Answer 1

当您的代码运行时，它会附加一个新的#cart-content-text片段，但是如果它不是第一次运行，它会继续附加更多。

Snipcart代码不知道您注入的HTML，因此您需要负责删除它或更新其内容。

您必须添加一些逻辑来检查您的自定义HTML是否已经存在。

此外，还可以使用Snipcart.subscribe代替Snipcart.execute :)

Answer 2

根据Jean-Sébastien-Tremblay的帖子，我意识到问题出在Gatsby布局组件中。

在版本1中，布局组件是一个特殊的组件，它充当页面组件外部的包装器。在版本2中，layout组件是一个常规组件，您可以将它包装在要使用它的页面上。关于推理的更多信息可以在Gatsby blog上找到。

此项目中的所有页面都是动态创建的。

我使用v1中的gatsby-plugin-layout重新实现了布局。我将组件从components目录移回了layouts目录，并将文件名从Layout.js更改为index.js。