React之useEffect缺少依赖警告问题及解决
更新时间：2023年12月14日 15:08:54 作者：新生代农民工官方认证码农小拽
这篇文章主要介绍了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配置代理服务器的5种方法,无论使用哪种方法,都需要确保代理服务器的地址和端口正确,并且在配置完成后重新启动React开发服务器,使配置生效,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了使用React Router v6 进行身份验证完全指南,本文将演示如何使用React Router v6创建受保护的路由以及如何添加身份验证，需要的朋友可以参考下2022-05-05
ReactiveCocoa代码实践之-UI组件的RAC信号操作
这篇文章主要介绍了ReactiveCocoa代码实践之-UI组件的RAC信号操作 的相关资料,需要的朋友可以参考下2016-04-04
这篇文章主要为大家介绍了Component与PureComponent解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
本篇文章主要介绍了react 实现页面代码分割、按需加载的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
图片懒加载是一种优化网页性能的技术,它允许在用户滚动到图片位置之前延迟加载图片,通过懒加载,可以在用户需要查看图片时才加载图片,避免了不必要的图片加载,本文给大家介绍了React实现图片懒加载的常见方式,需要的朋友可以参考下2024-01-01
这篇文章主要来和大家一起分享在 React 开发中常见的一些错误,以及如何避免这些错误,理解这些问题背后的细节,防止犯下类似的错误,需要的可以参考下2023-12-12
这篇文章主要为大家介绍了React项目中className运用及问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
create-react-app全家桶router mobx全局安装配置
这篇文章主要为大家介绍了create-react-app全家桶router mobx全局安装配置，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了react中useRef的应用使用详解的相关资料,需要的朋友可以参考下2023-05-05
最新评论