关于reactjs：如何在Gatsby中修复乘法Snipcart自定义html？

How to fix multiplying Snipcart custom html in Gatsby?

我最近将网站迁移到Gatsby [v2]，发现事件发生后Snipcart的自定义html会增加。如何防止每次页面导航或事件发生时Snipcart的自定义HTML都增加？当我打开模态时，多重渲染可见。我不确定这是React组件生命周期问题还是Gatsby [v2] Layout组件问题。

CustomSnipcartText组件使用componentDidMount调用Snipcart api，并使用这些方法将文本绑定到DOM。 CustomSnipcartText组件被导入到Gatsby Layout组件中。我尝试将组件导入到模态函数打开的位置，结果没有任何变化。

Snipcart自定义html组件：

1
2
3
4
5
6
7
8
9
10

// 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布局组件：

1
2
3
4
5

export default class Layout extends Component {
render() {
return (

<CustomSnipcartText /> ...

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