window.location.reload снова и снова обновляет страницу

Question

Я работаю над проектом, в котором я делаю недействительным кеш браузера, но когда я вызываю эту функцию window.location.reload(), она снова и снова обновляет sh страницу. Хочу сразу перезагрузить страницу. Может ли кто-нибудь помочь мне, как остановить обновление страницы снова и снова. Спасибо

Примечание: Я использую 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

Этот код вставлен между конструктором и рендером. this.state.refreshCacheAndReload должен иметь значение null в конструкторе, где вы выбираете его перезагрузку в componentdidmount всякий раз, когда версия не совпадает.

Answer 2

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