React Hooks: useEffect()調(diào)用了兩次問(wèn)題分析
正文
使用create-react-app腳手架創(chuàng)建的React前端項(xiàng)目，在函數(shù)式組件中使用useEffect加載接口數(shù)據(jù)時(shí) 發(fā)現(xiàn)一個(gè)奇怪的問(wèn)題：刷新頁(yè)面接口調(diào)用了兩次！！。
代碼分析
useEffect(() => {
const wrapper = async () => {
await fetchData();
}
wrapper().then(r => {});
}, [param])在 React Hooks: useEffect() is called twice even if an empty array is used as an argument 找到了答案。
原因
原因是開(kāi)發(fā)環(huán)境使用了React嚴(yán)格模式，代碼編譯后在正式環(huán)境不會(huì)出現(xiàn)這樣的問(wèn)題。
如果在開(kāi)發(fā)環(huán)境不想出現(xiàn)這種情況，可以在index.tsx中找到下面的代碼：
root.render(
<React.StrictMode>
<RouterProvider router={router}/>
</React.StrictMode>
);修改為：
root.render(
<RouterProvider router={router}/>
);問(wèn)題解決。
以上就是React Hooks: useEffect()調(diào)用了兩次問(wèn)題分析的詳細(xì)內(nèi)容，更多關(guān)于React Hooks useEffect()調(diào)用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文主要介紹了詳解React 中組件通信的幾種主要方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-09-09
一篇文章介紹redux、react-redux、redux-saga總結(jié)
這篇文章主要介紹了一篇文章介紹redux、react-redux、redux-saga總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
詳解React?ISR如何實(shí)現(xiàn)Demo
這篇文章主要為大家介紹了React?ISR如何實(shí)現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Redux是JavaScript狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理，今天通過(guò)本文給大家分享redux在react中使用及配置redux到react項(xiàng)目中的方法，感興趣的朋友跟隨小編一起看看吧2021-06-06
React如何將組件渲染到指定DOM節(jié)點(diǎn)詳解
這篇文章主要給大家介紹了關(guān)于React如何將組件渲染到指定DOM節(jié)點(diǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)下吧。2017-09-09
詳解Jotai Immer如何實(shí)現(xiàn)undo redo功能示例詳解
這篇文章主要為大家介紹了詳解Jotai Immer如何實(shí)現(xiàn)undo redo功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
在React中,useCallback和useMemo用于優(yōu)化性能,useCallback緩存函數(shù),useMemo緩存函數(shù)返回值,它們將數(shù)據(jù)存放在fiber.memoizedState,若依賴未變,復(fù)用舊值,原理相似,useRef不綁定DOM,更新亦復(fù)用舊值,本文介紹React中useCallback和useMemo的相關(guān)知識(shí),感興趣的朋友一起看看吧2026-04-04
封裝一個(gè)最簡(jiǎn)單ErrorBoundary組件處理react異常
這篇文章主要介紹了一個(gè)處理react異常的ErrorBoundary組件,簡(jiǎn)單實(shí)用,代碼詳細(xì),對(duì)這個(gè)組件感興趣的朋友可以參考下2021-04-04
最近有不少伙伴詢問(wèn)react的代理配置,自己也去試驗(yàn)了一下發(fā)現(xiàn)不少的問(wèn)題,在這就將所遇到的心得分享出來(lái),這篇文章主要給大家介紹了關(guān)于React開(kāi)啟代理的2種實(shí)用方式的相關(guān)資料,需要的朋友可以參考下2021-07-07
react使用css module無(wú)法重寫(xiě)bootstrap樣式問(wèn)題及解決
這篇文章主要介紹了react使用css module無(wú)法重寫(xiě)bootstrap樣式問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11