0

我正在尝试在我的 react.js 网站上加载 ecwid 商店。我创建了一个类组件，其中有一个名为 load ecwid 的函数。我已经把函数放在componentDidMount(). 控制台日志告诉我该函数加载得很好。但是，除非我手动刷新页面，否则屏幕上不会显示任何内容。

以下是我的代码：

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);
4

1 回答 1

0

您不必render()从内部调用您的方法componentDidMount()，您的组件应该在状态更新时重新呈现。因此，也许尝试删除您的this.render()呼叫componentDidMount()并在您的方法setState结束时使用。loadEdwic

在调试过程中使用组件更新方法shouldComponentUpdate和可能对您有所帮助。componentDidUpdate

于 2021-01-29T14:10:13.423 回答