Question

我正在处理使浏览器缓存无效的项目，但是当我调用此功能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;

Answer 1

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

Answer 2

此代码在构造函数和渲染器之间触发。在构造函数中，this.state.refreshCacheAndReload应该设置为null，在该版本中，您可以选择在版本不匹配时将其重新加载到componentdidmount中。

window.location.reload一次又一次刷新页面

2 个答案: