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中列表渲染的局部刷新问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了在create-react-app中使用sass的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了React中的useState如何改变值不重新渲染的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
React 18的推出标志着React并发特性的正式到来,其中useTransition钩子函数是一个重要的新增功能,下面我们就来学习一下useTransition钩子函数的具体使用吧2024-02-02
本文主要介绍了react项目自行配置热更新的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-11-11
这篇文章主要介绍了React中的for循环解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家介绍了React事件绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
本篇文章主要介绍了webpack+react+antd脚手架优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了React+CSS 实现绘制竖状柱状图，文章围绕主题展开详细的内容介绍。具有一定的参考价值，需要的朋友可以参考一下2022-09-09
react-native DatePicker日期选择组件的实现代码
本篇文章主要介绍了react-native DatePicker日期选择组件的实现代码，具有一定的参考价值，有兴趣的可以了解下2017-09-09
最新评论