Как исправить умножение Snipcart пользовательских HTML в Гэтсби?

Question

Недавно я перенес сайт на Gatsby[v2] и обнаружил, что пользовательский HTML-код для Snipcart умножается после того, как происходит событие. Как можно предотвратить умножение пользовательского HTML-кода Snipcart при каждом переходе по странице или при возникновении события? Многократный рендеринг виден, когда я открываю модальный. Я не уверен, является ли это проблемой жизненного цикла компонента React или проблемой компонента Gatsby[v2] Layout.

Компонент CustomSnipcartText использует componentDidMount для вызова API Snipcart и использования этих методов для привязки текста к DOM. Компонент CustomSnipcartText импортируется в компонент макета Gatsby. Я попытался импортировать компонент туда, где открывается модальная функция без изменений в результатах.

Пользовательский HTML-компонент Snipcart:

  // 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 Layout.

В версии 1 компонент макета был специальным компонентом, который действовал как оболочка за пределами компонента страницы. В версии 2 компонент макета является обычным компонентом, где вы оборачиваете его на страницах, которые хотите использовать. Более подробно об этом можно узнать из блога Гэтсби.

Все страницы в этом проекте создаются динамически.

Я использовал gatsby-plugin-layout переопределить макет из v1. Я переместил компонент из каталога компонентов обратно в каталог макетов и изменил имя файла с Layout.js в index.js,