在反应类组件中只刷新一次页面答案

【问题标题】：Refresh the page only once in react class component在反应类组件中只刷新一次页面
【发布时间】：2021-04-10 04:40:21
【问题描述】：

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

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

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

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

知道如何在反应类组件中做到这一点吗？

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

【问题讨论】：

可能分享您为什么要这样做？我们可以分享一个替代解决方案。因为您所做的并不是处理任何应用程序的正常方式。由于 react 是客户端应用程序，因此在重新加载页面时，您基本上是在“重置”客户端应用程序
这是因为页面重新加载时，会调用componentDidMount()函数。在此函数中，您调用了 window.location.reload() 函数。所以页面将再次重新加载等等。
我根本不重新加载
@SomeoneSpecial 我编辑了它
您使用了错误的方法来处理您的问题。要保存状态，您应该使用 react 的 useContext 或 Redux 存储，无论您是否将其保存到 sessionStorage。

标签： reactjs class reload

【解决方案1】：

也许这会解决你的问题

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

【讨论】：

它做到了！男人，你是一个救生员