Reload render function after componentDidMount is loaded

Question

I am trying to load ecwid store on my react.js website. I have created a class component where there is a function called load ecwid. I have put the function in the componentDidMount(). The console logs tell me the function is loaded well and good. However, nothing shows up on the screen unless I manually refresh the page.

The following is my code:

class EcwidStore extends React.Component {
  state = {
    isLoaded: false,
  };

  loadEcwid = () => {
    var isEcwidPage = document.getElementById('productBrowser') != null;
    if (window.ecwidLoaded && isEcwidPage) return;

    window.ecwidLoaded = true;
    window.ecwid_script_defer = true;
    window.ecwid_dynamic_widgets = true;

    window.ec.storefront = window.ec.storefront || Object();
    window.ec.enable_catalog_on_one_page = true;
    window._xnext_initialization_scripts = [
      {
        widgetType: 'ProductBrowser',
        id: 'my-store-xxx',
        arg: ['id=productBrowser', 'views=grid(20,3)'],
      },
      {
        widgetType: 'CategoriesV2',
        id: 'my-categories-xxx',
        arg: ['id=categoriesV2'],
      },
      {
        widgetType: 'SearchWidget',
        id: 'my-search-xxx',
        arg: ['id=searchWidget'],
      },
    ];

    if (typeof Ecwid != 'undefined') {
    } else {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.type = 'text/javascript';
      script.id = 'ecwid-script';
      script.src = 'https://app.ecwid.com/script.js?xxx&data_platform=code&data_date=2021-01-14';
      document.getElementById('my-store-xxx').appendChild(script);
    }
  };

  componentDidMount() {
    this.loadEcwid();
    this.setState({ isLoaded: true });
    console.log('loaded!');
    this.render();
  }

  render() {
    return (
      <div>
        <div id="my-search-xxx" />
        <div id="my-store-xxx" />
        <div id="productBrowser" />
        <div id="my-categories-xxx" />
        <div className="ec-cart-widget" />
      </div>
    );
  }
}

export default withRouter(EcwidStore);

score 0 · Answer 1 · answered Jan 29 '21 at 14:10

0

You shouldn't have to call your render() method from within componentDidMount(), your component shoud be rerendered upon state update. As such, maybe try removing your this.render() call from componentDidMount() and use setStateat the end of your loadEdwic method.

Using component update method such as shouldComponentUpdate and componentDidUpdate might help you during your debugging process as well.

answered Jan 29 '21 at 14:10

Tam

314
2
5

I had put that function cause I wanted the html to run after the function is loaded. Removing the this.render function is not making any difference to the output. I have already tried the state method – Khushboo Gandhi Jan 29 '21 at 14:14

Reload render function after componentDidMount is loaded

1 Answers1