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 quill中图片上传由默认转成base64改成上传到服务器的方法

    react quill中图片上传由默认转成base64改成上传到服务器的方法

    这篇文章主要介绍了react quill中图片上传由默认转成base64改成上传到服务器的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • React浅析Fragments使用方法

    React浅析Fragments使用方法

    这篇文章主要介绍了React Fragments使用方法,关于react Fragments,React中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表,并且不在DOM中增加额外节点
    2022-12-12
  • react16.8.0以上MobX在hook中的使用方法详解

    react16.8.0以上MobX在hook中的使用方法详解

    这篇文章主要为大家介绍了react16.8.0以上MobX在hook中的使用方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • React封装高阶组件实现路由权限的控制详解

    React封装高阶组件实现路由权限的控制详解

    这篇文章主要介绍了React封装高阶组件实现路由权限的控制,在React中,为了实现安全可靠的路由权限控制,可以通过多种方式来确保只有经过授权的用户才能访问特定路径下的资源,下面来介绍封装高阶组件控制的方法,需要的朋友可以参考下
    2025-02-02
  • React特征学习之Form格式示例详解

    React特征学习之Form格式示例详解

    这篇文章主要为大家介绍了React特征学习之Form格式示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 十分钟带你快速了解React16新特性

    十分钟带你快速了解React16新特性

    这篇文章主要介绍了十分钟带你快速了解React16新特性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 修复Next.js中window is not defined方法详解

    修复Next.js中window is not defined方法详解

    这篇文章主要为大家介绍了修复Next.js中window is not defined方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React如何实现像Vue一样将css和js写在同一文件

    React如何实现像Vue一样将css和js写在同一文件

    这篇文章主要介绍了React如何实现像Vue一样将css和js写在同一文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • React Refs 的使用forwardRef 源码示例解析

    React Refs 的使用forwardRef 源码示例解析

    这篇文章主要为大家介绍了React 之 Refs 的使用和 forwardRef 的源码解读,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践

    深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践

    这篇文章主要介绍了深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践,TypeScript 增加了代码的可读性和可维护性,拥有活跃的社区,,需要的朋友可以参考下
    2019-06-06

最新评论