React之useEffect缺少依賴警告問題及解決
React useEffect缺少依賴警告
代碼：
useEffect(() => {
// ... 省略無關(guān)代碼
setFriends([msg, ...friends]);
}, [])
本意是獲取到msg數(shù)據(jù)后，利用原有的friends，更新出現(xiàn)在的friends數(shù)據(jù)。
警告
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這個(gè)狀態(tài)數(shù)據(jù)，讓friends變成了依賴數(shù)據(jù)。
這樣可能會導(dǎo)致循環(huán)渲染的問題。就是friends變化了，然后去通過setFriends方法
去更新了friends，這讓friends又發(fā)生了變化，于是繼續(xù)去調(diào)用setFriends去更新friends…
此時(shí)，如果不想讓friends作為依賴項(xiàng)，就用函數(shù)的方式去刪除friends這個(gè)外部依賴，
代碼改為這樣
useEffect(() => {
// ... 省略無關(guān)代碼
setFriends(friends => [msg, ...friends]);
}, [])
總結(jié)
至此，問題解決。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
react quill中圖片上傳由默認(rèn)轉(zhuǎn)成base64改成上傳到服務(wù)器的方法
這篇文章主要介紹了react quill中圖片上傳由默認(rèn)轉(zhuǎn)成base64改成上傳到服務(wù)器的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了React Fragments使用方法，關(guān)于react Fragments,React中一個(gè)常見模式是為一個(gè)組件返回多個(gè)元素。Fragments 可以讓你聚合一個(gè)子元素列表，并且不在DOM中增加額外節(jié)點(diǎn)2022-12-12
react16.8.0以上MobX在hook中的使用方法詳解
這篇文章主要為大家介紹了react16.8.0以上MobX在hook中的使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
React封裝高階組件實(shí)現(xiàn)路由權(quán)限的控制詳解
這篇文章主要介紹了React封裝高階組件實(shí)現(xiàn)路由權(quán)限的控制,在React中,為了實(shí)現(xiàn)安全可靠的路由權(quán)限控制,可以通過多種方式來確保只有經(jīng)過授權(quán)的用戶才能訪問特定路徑下的資源,下面來介紹封裝高階組件控制的方法,需要的朋友可以參考下2025-02-02
這篇文章主要為大家介紹了React特征學(xué)習(xí)之Form格式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了十分鐘帶你快速了解React16新特性,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
修復(fù)Next.js中window?is?not?defined方法詳解
這篇文章主要為大家介紹了修復(fù)Next.js中window?is?not?defined方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React如何實(shí)現(xiàn)像Vue一樣將css和js寫在同一文件
這篇文章主要介紹了React如何實(shí)現(xiàn)像Vue一樣將css和js寫在同一文件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
React?Refs?的使用forwardRef?源碼示例解析
這篇文章主要為大家介紹了React?之?Refs?的使用和?forwardRef?的源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
深入學(xué)習(xí)TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐
這篇文章主要介紹了深入學(xué)習(xí)TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐，TypeScript 增加了代碼的可讀性和可維護(hù)性，擁有活躍的社區(qū)，,需要的朋友可以參考下2019-06-06