如何解决Gatsby[v2]中Snipcart自定义HTML重复渲染问题？

看起来你遇到的核心问题是两个：事件重复绑定导致回调多次执行，以及每次回调都直接插入HTML而没有检查是否已存在。结合Gatsby的组件生命周期和Snipcart的事件机制，我们可以从以下几个方面修复：

1. 阻止重复插入自定义HTML #

每次打开购物车时，你的代码都会直接把#cart-content-text的内容插入到#snipcart-footer前，但没有检查这段内容是否已经存在。这会导致每次触发cart.opened事件就新增一份HTML。

解决办法是给插入的自定义内容加一个唯一ID，在插入前先判断该ID是否存在：

// 修改CustomSnipcartText组件的回调逻辑
Snipcart.execute('bind', 'cart.opened', function() {
  /* global $: false */
  // 检查自定义文本是否已经存在
  const hasExistingText = $('#custom-cart-footer-text').length > 0
  if (!hasExistingText) {
    let html = $('#cart-content-text').html()
    // 给插入的元素添加唯一ID，方便后续检查
    $(`<div id="custom-cart-footer-text">${html}</div>`).insertBefore($('#snipcart-footer'))
  }
})

2. 避免事件重复绑定 #

你的代码在componentDidMount中绑定事件，但如果Gatsby的Layout组件因为路由切换或其他原因被重新挂载（比如某些场景下Layout会随页面卸载/挂载），就会重复绑定cart.opened事件，导致多次触发回调。

类组件解决方案： #

用实例变量标记事件是否已绑定，同时在组件卸载时解绑事件，防止内存泄漏：

class CustomSnipcartText extends React.Component {
  // 标记是否已绑定事件
  isEventBound = false

  componentDidMount() {
    /* global Snipcart:false */
    if (this.isEventBound) return

    const handleCartOpened = () => {
      /* global $: false */
      const hasExistingText = $('#custom-cart-footer-text').length > 0
      if (!hasExistingText) {
        let html = $('#cart-content-text').html()
        $(`<div id="custom-cart-footer-text">${html}</div>`).insertBefore($('#snipcart-footer'))
      }
    }

    // 绑定事件
    Snipcart.execute('bind', 'cart.opened', handleCartOpened)
    this.isEventBound = true
  }

  componentWillUnmount() {
    /* global Snipcart:false */
    // 组件卸载时解绑事件
    if (this.isEventBound) {
      Snipcart.execute('unbind', 'cart.opened')
      this.isEventBound = false
    }
  }

  render() {
    return (
      <div id="cart-content-text" style={{ display: 'none' }}>
        {/* 你的自定义文本内容 */}
      </div>
    )
  }
}

函数组件解决方案（推荐，更符合React现代写法）： #

用useRef标记绑定状态，useEffect处理副作用和清理：

import { useEffect, useRef } from 'react'

const CustomSnipcartText = () => {
  const isEventBound = useRef(false)

  useEffect(() => {
    /* global Snipcart:false, $:false */
    if (isEventBound.current) return

    const handleCartOpened = () => {
      const hasExistingText = $('#custom-cart-footer-text').length > 0
      if (!hasExistingText) {
        const html = $('#cart-content-text').html()
        $(`<div id="custom-cart-footer-text">${html}</div>`).insertBefore($('#snipcart-footer'))
      }
    }

    Snipcart.execute('bind', 'cart.opened', handleCartOpened)
    isEventBound.current = true

    // 清理函数：组件卸载时解绑事件
    return () => {
      Snipcart.execute('unbind', 'cart.opened', handleCartOpened)
      isEventBound.current = false
    }
  }, []) // 空依赖数组确保只执行一次

  return (
    <div id="cart-content-text" style={{ display: 'none' }}>
      {/* 你的自定义文本内容 */}
    </div>
  )
}

3. 确认Layout组件的挂载方式 #

在Gatsby v2中，建议通过gatsby-browser.js和gatsby-ssr.js的wrapRootElement或wrapPageElement API来配置全局Layout，这样Layout只会挂载一次，避免因页面路由切换导致的重复挂载。

比如在gatsby-browser.js中：

import React from 'react'
import Layout from './src/components/Layout'

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

这样配置后，Layout不会随页面切换而卸载/重新挂载，进一步减少事件重复绑定的可能。

内容的提问来源于stack exchange，提问作者SedStan