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

坎帕尔

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

演示版

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

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

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

科比

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

当我更改页面时,React Router Dom删除值

来自分类Dev

带有KOA的React Router的同构React

来自分类Dev

每当我调用OnDayPress时,react-native-calendar都会重新渲染到当月

来自分类Dev

带有 Typescript 的 React Router 未定义“React”

来自分类Dev

每当我调用 onClick 函数时,所有其他的 onclick 函数都会被调用

来自分类Dev

当我使用<a>标签遵循路线时,React-Router正在刷新页面

来自分类Dev

带有react-router-dom链接的SpeedDialAction

来自分类Dev

带有 Reactstrap 和 React Router Dom 的 Active NavLink

来自分类Dev

每当我在react native中编辑文本输入字段时,都会显示警报提示

来自分类Dev

带有嵌套异步函数的React.js useEffect

来自分类Dev

如何使用带有typescript的react router dom导航到新页面

来自分类Dev

除非刷新页面,否则带有React-Table的UseEffect不会显示更改

来自分类Dev

使用React Router导航到页面时useEffect根本不运行

来自分类Dev

React Router没有显示我的组件

来自分类Dev

我有多个onClick按钮,每当我单击1按钮时,所有相同的按钮都会触发。React.js

来自分类Dev

我有多个onClick按钮,每当我单击1按钮时,所有相同的按钮都会触发。React.js

来自分类Dev

使用带有redux的react-native-router-flux,如何更新视图组件中的状态?

来自分类Dev

ActiveClassName在React-Router中带有多层选项卡

来自分类Dev

使用带有可选URL参数的react-router链接设置活动类

来自分类Dev

React-Router:嵌套路由而不嵌套带有通配符路径的组件

来自分类Dev

TypeError:undefined不是带有React-router-dom的对象(评估“ undefined.state”)

来自分类Dev

模拟React-Router-dom useHistory和其他带有笑话的钩子

来自分类Dev

History.Push链接到带有React Router的新选项卡

来自分类Dev

React-Router:嵌套路由而不嵌套带有通配符路径的组件

来自分类Dev

ActiveClassName在React-Router中带有多层选项卡

来自分类Dev

React Router-带有可选参数的路由不起作用

来自分类Dev

Typescript 2种带有react-router的类型,找不到名称路径,组件

来自分类Dev

未捕获到的SyntaxError:在React-Router中出现意外的令牌<,最后带有斜杠

来自分类Dev

带有 ReactCSSTransitionGroup 附加组件的 React Router v4 组件转换

Related 相关文章

  1. 1

    当我更改页面时,React Router Dom删除值

  2. 2

    带有KOA的React Router的同构React

  3. 3

    每当我调用OnDayPress时,react-native-calendar都会重新渲染到当月

  4. 4

    带有 Typescript 的 React Router 未定义“React”

  5. 5

    每当我调用 onClick 函数时,所有其他的 onclick 函数都会被调用

  6. 6

    当我使用<a>标签遵循路线时,React-Router正在刷新页面

  7. 7

    带有react-router-dom链接的SpeedDialAction

  8. 8

    带有 Reactstrap 和 React Router Dom 的 Active NavLink

  9. 9

    每当我在react native中编辑文本输入字段时,都会显示警报提示

  10. 10

    带有嵌套异步函数的React.js useEffect

  11. 11

    如何使用带有typescript的react router dom导航到新页面

  12. 12

    除非刷新页面,否则带有React-Table的UseEffect不会显示更改

  13. 13

    使用React Router导航到页面时useEffect根本不运行

  14. 14

    React Router没有显示我的组件

  15. 15

    我有多个onClick按钮,每当我单击1按钮时,所有相同的按钮都会触发。React.js

  16. 16

    我有多个onClick按钮,每当我单击1按钮时,所有相同的按钮都会触发。React.js

  17. 17

    使用带有redux的react-native-router-flux,如何更新视图组件中的状态?

  18. 18

    ActiveClassName在React-Router中带有多层选项卡

  19. 19

    使用带有可选URL参数的react-router链接设置活动类

  20. 20

    React-Router:嵌套路由而不嵌套带有通配符路径的组件

  21. 21

    TypeError:undefined不是带有React-router-dom的对象(评估“ undefined.state”)

  22. 22

    模拟React-Router-dom useHistory和其他带有笑话的钩子

  23. 23

    History.Push链接到带有React Router的新选项卡

  24. 24

    React-Router:嵌套路由而不嵌套带有通配符路径的组件

  25. 25

    ActiveClassName在React-Router中带有多层选项卡

  26. 26

    React Router-带有可选参数的路由不起作用

  27. 27

    Typescript 2种带有react-router的类型,找不到名称路径,组件

  28. 28

    未捕获到的SyntaxError:在React-Router中出现意外的令牌<,最后带有斜杠

  29. 29

    带有 ReactCSSTransitionGroup 附加组件的 React Router v4 组件转换

热门标签

归档