如何在 componentDidMount 之后重新加载页面只反应一次答案

【问题标题】：How reload page in react just once after componentDidMount如何在 componentDidMount 之后重新加载页面只反应一次
【发布时间】：2019-08-28 18:28:19
【问题描述】：

我有一些问题我一个小时都想不通..

这是什么：

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

在这个组件中，我需要放置一些第 3 方 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()

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

我怎么知道这个？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

如果你真的想要这个 - 向搜索字符串添加一个唯一参数，例如 loadScript("https://somewhere/js?for=myid&ver=" + Math.random()); // 但你应该使用自己的唯一 id 生成器而不是 Math.random()，例如 - https://www.npmjs.com/package/uniqid

【讨论】：

【解决方案2】：

我建议您在组件加载之前在构造函数中加载脚本。使用 componentDidMount 中的 setState 不是最佳实践

【讨论】：

你能解释更多吗？
是的，每个组件都有 ha 构造函数，它接收 props 作为参数。您可以简单地覆盖这种方式：constructor(props){ super(props); loadingScripts(....);} 然后将 loadingScript 定义为方法，你就完成了。（对不起，缩进，但我现在来自手机XD。