javascript - 每次更改页面时都会调用 React useEffect (with []) (React Router)

标签 javascript reactjs react-router react-hooks

我为这个问题准备了一个小演示:

Demo

因此,我使用 react-router-dom 创建单页应用程序,并在两个页面(组件 Page1 和 Page2)之间创建了标准导航。

问题是每次我在页面之间切换时都会调用 useEffect 钩子(Hook)(第二个参数为空数组)(在演示中你可以在控制台中看到它)。

我只想为每个组件获取一次数据并在之后重用该数据,无论用户是否会在页面之间切换。是否有可能在不检查 useEffect 函数内部的某些条件的情况下执行此操作?这让我有点困惑,因为 useEffect [] 应该只为组件运行一次,但事实并非如此。

最佳答案

空的 deps 数组意味着 useEffect 只会在每次安装组件时调用。每次更改页面时都会调用 useEffect,因为每次都会卸载页面组件,然后在您再次访问它时重新安装。例如,尝试点击页面 1 链接两次。它只会记录一次消息,因为页面没有被卸载和重新装载。

您可以尝试通过使用比页面更高级别的 useEffect 来解决此问题,这将是您的应用程序组件,并改为在那里调用您的提取。但是,我不确定是否可以使用类组件来完成,因此您可能不得不改用函数组件。

关于javascript - 每次更改页面时都会调用 React useEffect (with []) (React Router),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58556150/

相关文章:

javascript - 单击特定选项值时触发事件

javascript - Visual Studio JavaScript 调试速度极慢

javascript - 使用 React + Redux 获取所有选中的复选框及其相关数据

reactjs - React 应用程序未加载到打包的 Electron 应用程序中

javascript - 在 react 路由器中传递可选参数

javascript - react native : Always running component

javascript - jQuery,通过href选择时转义字符

javascript - 如何使用 vue js 显示以下响应?

ajax - React - ajax post 请求后更新状态的方法

reactjs - react native 网络的 react 导航?