React中实现window.location.reload()仅执行一次的问题求助

当你调用window.location.reload()时，整个页面会被完全重新加载，React组件会从头初始化，useState(true)会把firstRender重新设为true，导致每次刷新后都会再次触发useEffect里的刷新逻辑，形成无限循环。

用sessionStorage（或localStorage）来标记页面是否已经完成过首次刷新，因为页面刷新后存储的数据不会丢失。

修改后的代码如下：

const refreshPage = () => {
  window.location.reload();
};

useEffect(() => {
  // 检查sessionStorage里是否有已刷新的标记
  const hasRefreshed = sessionStorage.getItem('hasPageRefreshed');
  if (!hasRefreshed) {
    // 标记已刷新
    sessionStorage.setItem('hasPageRefreshed', 'true');
    refreshPage();
  }
}, []);

• 使用sessionStorage的话，当用户关闭标签页后标记会自动清除，下次打开页面会再次触发刷新；如果希望永久保留标记，改用localStorage即可。
• 把useEffect的依赖数组设为空，确保只在组件首次挂载时执行一次判断逻辑。

内容的提问来源于stack exchange，提问作者someone