React之useEffect缺少依赖警告问题及解决
React useEffect缺少依赖警告
代码:
useEffect(() => { // ... 省略无关代码 setFriends([msg, ...friends]); }, [])
本意是获取到msg数据后,利用原有的friends
,更新出现在的friends
数据。
警告
React Hook useEffect has a missing dependency: 'friends'.
Either include it or remove the dependency array.
You can also do a functional update 'setFriends(f => ...)'
if you only need 'friends' in the 'setFriends' call react-hooks/exhaustive-deps
原因
大致是在useEffect
中引入了friends
这个状态数据,让friends
变成了依赖数据。
这样可能会导致循环渲染的问题。就是friends
变化了,然后去通过setFriends
方法
去更新了friends
,这让friends
又发生了变化,于是继续去调用setFriends
去更新friends
…
此时,如果不想让friends
作为依赖项,就用函数的方式去删除friends
这个外部依赖,
代码改为这样
useEffect(() => { // ... 省略无关代码 setFriends(friends => [msg, ...friends]); }, [])
总结
至此,问题解决。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
React-Hook中使用useEffect清除定时器的实现方法
这篇文章主要介绍了React-Hook中useEffect详解(使用useEffect清除定时器),主要介绍了useEffect的功能以及使用方法,还有如何使用他清除定时器,需要的朋友可以参考下2022-11-11详解在React.js中使用PureComponent的重要性和使用方式
这篇文章主要介绍了详解在React.js中使用PureComponent的重要性和使用方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-07-07react router4+redux实现路由权限控制的方法
本篇文章主要介绍了react router4+redux实现路由权限控制的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论