window.location.reload 不断刷新页面答案

【问题标题】：window.location.reload is refreshing page again and againwindow.location.reload 不断刷新页面
【发布时间】：2020-10-08 17:04:42
【问题描述】：

我正在处理使浏览器缓存无效的项目，但是当我调用此函数 window.location.reload() 时，它会一次又一次地刷新页面。我想立即重新加载页面。有人可以帮我如何阻止页面一次又一次地刷新。谢谢

注意：我使用的是 React.JS

代码

import React from "react";
import packageJson from "../package.json";
global.appVersion = packageJson.version;

// version from response - first param, local version second param
const semverGreaterThan = (versionA, versionB) => {
  const versionsA = versionA.split(/\./g);

  const versionsB = versionB.split(/\./g);
  while (versionsA.length || versionsB.length) {
    const a = Number(versionsA.shift());

    const b = Number(versionsB.shift());
    // eslint-disable-next-line no-continue
    if (a === b) continue;
    // eslint-disable-next-line no-restricted-globals
    return a > b || isNaN(b);
  }
  return false;
};

class CacheBuster extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      isLatestVersion: false,
      refreshCacheAndReload: (caches) => {
        if (caches) {
          caches.keys().then(async function (names) {
            await Promise.all(names.map((name) => caches.delete(name)));
          });
        }

        window.location.reload();
      },
    };
  }

  componentDidMount() {
    fetch(`/meta.json?${new Date().getTime()}`, { cache: "no-cache" })
      .then((response) => response.json())
      .then((meta) => {
        const latestVersion = meta.version;
        const currentVersion = global.appVersion;

        const shouldForceRefresh = semverGreaterThan(
          latestVersion,
          currentVersion
        );
        if (shouldForceRefresh) {
          console.log(
            `We have a new version - ${latestVersion}. Should force refresh`
          );
          this.setState({ loading: false, isLatestVersion: false });
        } else {
          console.log(
            `You already have the latest version - ${latestVersion}. No cache refresh needed.`
          );
          this.setState({ loading: false, isLatestVersion: true });
        }
      });
  }
  render() {
    const { loading, isLatestVersion, refreshCacheAndReload } = this.state;
    return this.props.children({
      loading,
      isLatestVersion,
      refreshCacheAndReload,
    });
  }
}

export default CacheBuster;

【问题讨论】：

问题似乎不在此代码中。您可能会在每次页面加载时再次调用此函数。
我还会将重载移到“await”行下方。
@Heroselohim 。好吧，我正在按照本教程进行缓存破坏。你能检查一下这个链接吗？我把它移到上面，但不知道它会不会像我想要的那样工作dev.to/flexdinesh/cache-busting-a-react-app-22lk
@Heroselohim 我刚刚更新了我的问题，请您检查一下！
我提供的解决方案有效吗？如果是这样，你能把它标记为正确答案吗？

标签： javascript reactjs webpack ecmascript-6

【解决方案1】：

if (caches) {...} else (window.location.reload(true));

【讨论】：

虽然此代码可以解决 OP 的问题，但最好包含关于您的代码如何解决 OP 问题的说明。通过这种方式，未来的访问者可以从您的帖子中学习，并将其应用到他们自己的代码中。 SO 不是编码服务，而是知识资源。此外，高质量、完整的答案更有可能得到支持。这些功能，以及所有帖子都是独立的要求，是 SO 作为一个平台的一些优势，使其与论坛区分开来。您可以编辑以添加其他信息和/或使用源文档补充您的解释。

【解决方案2】：

这段代码是在构造函数和渲染之间触发的。 this.state.refreshCacheAndReload 应该在构造函数中设置为 null，在这里你可以选择在版本不匹配时在 componentdidmount 中重新加载它。

【讨论】：