React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React之useEffect缺少依赖警告

React之useEffect缺少依赖警告问题及解决

作者:新生代农民工官方认证码农小拽

这篇文章主要介绍了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]);
}, [])

总结

至此,问题解决。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文