在 react class 组件中只刷新一次页面

Question

我有一个 React 应用程序，其页面上有一个 class 组件。我想做的是在您第一次加载该页面时只刷新一次该页面，但是我尝试过的所有操作（例如 window.location.reload() ）都以无限刷新循环结束。有谁知道如何做到这一点？我是一个功能组件，我喜欢这样，它可以工作：

 useEffect(() => {
    if(reloadCount < 2) {
      sessionStorage.setItem('reloadCount', String(reloadCount + 1));
      window.location.reload();
    } else {
      sessionStorage.removeItem('reloadCount');
    }
  }, []);

但是如果我将它转换为 class 组件，就像这样，它不起作用:

componentDidMount() {
    if(this.reloadCount < 2) {
      sessionStorage.setItem('reloadCount', String(this.reloadCount + 1));
      window.location.reload();
    } else {
      sessionStorage.removeItem('reloadCount');
    }
  }

知道如何在 React class 组件中做到这一点吗？

P.S。我想这样做是因为我使用了一个 mapbox 组件，它将之前初始化的地图保存到 DOM，所以当用户 return 到包含地图的页面时，不需要再次初始化地图。但现在我在另一个页面上也有这张地图，如果我在包含地图的 2 个页面之间导航，它会保留前一页的 css，而且它搞砸了。解决此问题的唯一方法是强制刷新页面。

Answer 1

也许这会解决您的问题

componentDidMount() {
    const reloadCount = sessionStorage.getItem('reloadCount');
    if(reloadCount < 2) {
      sessionStorage.setItem('reloadCount', String(reloadCount + 1));
      window.location.reload();
    } else {
      sessionStorage.removeItem('reloadCount');
    }
  }

在 react class 组件中只刷新一次页面

Refresh the page only once in react class component

class

reload

reactjs