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 quill中图片上传由默认转成base64改成上传到服务器的方法
这篇文章主要介绍了react quill中图片上传由默认转成base64改成上传到服务器的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-10-10
react16.8.0以上MobX在hook中的使用方法详解
这篇文章主要为大家介绍了react16.8.0以上MobX在hook中的使用方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07
修复Next.js中window is not defined方法详解
这篇文章主要为大家介绍了修复Next.js中window is not defined方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-12-12
React Refs 的使用forwardRef 源码示例解析
这篇文章主要为大家介绍了React 之 Refs 的使用和 forwardRef 的源码解读,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-11-11
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
这篇文章主要介绍了深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践,TypeScript 增加了代码的可读性和可维护性,拥有活跃的社区,,需要的朋友可以参考下2019-06-06


最新评论