ReactJS 在每次访问页面时仅在一次内使用 window.location.reload() 启动 useEffect

Question

这种业余的问题还请见谅
我有以下问题，我自己无法解决：
我正在做一个 cra-project，在这个项目中，我使用了来自 curtainjs 的持续扭曲的图像动画和滚动动画，以及 react-router-dom 用于我的路由。
当我切换到 About 页面并从那里返回时，图像不再可见，只是在重新加载之后，所以我的想法是每次返回时都重新加载该页面。我在一个简单的逻辑中使用了带有 window.location.reload() 的 useEffect-Hook。如果我理解正确，useEffect 会在每次渲染更改时运行。
所以我认为图像的连续动画可能存在问题，因为 useEffect 在连续循环中重复 - 即使挂钩末尾的数组在那里并且是空的。

所以至少我的问题是如何在我单击返回后仅启动一次 window.location.reload()在 About.js 中，即使由于主页上的图像动画 (App.js) 而存在任何类型的重新渲染。可能吗？

希望有人能帮帮我，谢谢！

App.js:

function App() {
  const [loading, setLoading] = useState(1);

  useEffect(() => {
    if (loading === 1) {
      window.location.reload();
      console.log('page is loading')
      setLoading(loading + 1);
    } else {
      console.log('page already loaded');
    }
  }, []);
  return (
    <>
        ...
    </>
  );
}

export default App;

Answer 1

尝试这样的事情。

function App() {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (loading) {
      window.location.reload();
    } else {
      console.log('page already loaded');
    }
  }, [loading]);
  return (
    <>
        ...
         <button type="button" onClick={() => setLoading(true)}>Refresh page</button>
        ...
    </>
  );
}

export default App;

该按钮只是一个示例，但您可以使用其他方式更改加载状态。

如果你不想使用 window.location.reload() 你可以试试这个：

function App() {
          const [loading, setLoading] = useState(false);
        
          useEffect(() => {
            if(loading) {
             setLoading(false)
}
        }, [loading]);
          return (
            <>
                {loading ? null : (
                 <>
...<button type="button" onClick={() => setLoading(true)}>Refresh page</button>...
                 <>
               )}
            </>
          );
        }
        
        export default App;

ReactJS 在每次访问页面时仅在一次内使用 window.location.reload() 启动 useEffect

ReactJS fire up useEffect with window.location.reload() inside just one time on every page visit

reactjs

react-router-dom

use-effect

use-state

curtains.js