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

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

1 голос
/ 30 мая 2019

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

Компонент 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 не должен умножаться после любого события.

Ответы [ 2 ]

1 голос
/ 06 июня 2019

Когда ваш код запускается, он добавляет новый фрагмент #cart-content-text, но если он запускается не первый раз, он продолжит добавлять больше.

Код Snipcart не знает оHTML, который вы вводите, поэтому вы обязаны удалить его ИЛИ для обновления его содержимого.

Вам нужно будет добавить логику, чтобы проверить, существует ли уже ваш пользовательский HTML.

Также вместо Snipcart.execute можно использовать Snipcart.subscribe:)

0 голосов
/ 10 июня 2019

Основываясь на публикации Жан-Себастьян-Трембле , я понял, что проблема в компоненте Gatsby Layout.

В версии 1 компонент макета был специальным компонентом, который действовал как оболочка за пределами компонента страницы. В версии 2 компонент layout - это обычный компонент, в который вы помещаете его на страницы, которые хотите использовать. Подробнее об этом можно узнать в блоге Gatsby .

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

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

...