每当我更改页面时,都会调用React useEffect(带有[])(React Router)

时间:2019-10-25 09:51:01

标签: javascript reactjs react-router react-hooks

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

Demo

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

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

无论用户是否在页面之间切换,我都只希望为每个组件提取一次数据,然后再使用该数据。是否有可能在不检查useEffect函数内部某些条件的情况下进行操作?这让我有些困惑,因为useEffect []应该只为组件运行一次,而并非如此。

1 个答案:

答案 0 :(得分:5)

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

您可以尝试使用useEffect来解决此问题,该级别高于页面(该页面将作为您的应用程序组件),然后在该页面调用获取。但是,我不确定可以使用类组件来完成此操作,因此您可能不得不使用功能组件。