Question

我有一些问题，我无法计算一个小时。

这是什么：

我正在使用react and react路由器。我有一些自己的路线，例如/ about

，在此组件中，我需要放置一些第三方JavaScript文件，该文件与从某些服务获取一些iframe一起进入我的页面。

此服务告诉我添加其脚本并渲染具有特定ID的div

我将此脚本通过componentDidMount方法放置到我的组件中，

componentDidMount() {
   var loadScript = function(src) {
      var tag = document.createElement("script");
      tag.async = false;
      tag.src = src;
      var body = document.getElementsByTagName("body")[0];
      body.appendChild(tag);
    };
    loadScript("https://somewhere/js?for=myid");
}

，然后在我的渲染器中：

render() {
    return (
        <div className="content">
          <div id="iframe_app"></div>
        </div>
    );
  }

到这里一切都正常，但是此脚本标记仅调用一次。当我更改路线时，例如转到我的应用程序的另一页并返回该组件脚本，则该脚本无法正常工作，不会出现在“网络”标签中。

但是如果我用ctrl + r刷新窗口，那么一切都会再次起作用。

所以我不知道为什么会这样，因此我认为直接使用

刷新componentDidMount上的页面

window.location.reload()

但是那个时候它在循环工作，所以我的页面刷新了无限

我该如何解决呢？

Answer 1

如果您确实要这样做-将唯一参数添加到搜索字符串中，例如loadScript（“ https://somewhere/js?for=myid&ver=” + Math.random（））;。 //，但您应该使用自己的唯一ID生成器，而不要使用Math.random（），例如，此https://www.npmjs.com/package/uniqid

Answer 2

您可以做的一件事就是为状态添加一些逻辑

state = { isLoaded: false}

componentDidMount {
   if (!this.state.isLoaded) {
      // do stuff
   }
   this.setState({isLoaded: true})
}

它应该只做一次

Answer 3

我建议您在组件已加载之前在构造函数中加载脚本。最好不要使用componentDidMount中的setState

如何在componentDidMount之后仅一次响应重新加载页面

3 个答案: