快捷導(dǎo)航

React Hooks: useEffect()調(diào)用了兩次問題分析

更新時(shí)間：2023年11月23日 09:58:36 作者：來了老弟

這篇文章主要為大家介紹了React Hooks: useEffect()調(diào)用了兩次問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

正文

使用create-react-app腳手架創(chuàng)建的React前端項(xiàng)目，在函數(shù)式組件中使用useEffect加載接口數(shù)據(jù)時(shí) 發(fā)現(xiàn)一個(gè)奇怪的問題：刷新頁面接口調(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 找到了答案。

原因

原因是開發(fā)環(huán)境使用了React嚴(yán)格模式，代碼編譯后在正式環(huán)境不會(huì)出現(xiàn)這樣的問題。

如果在開發(fā)環(huán)境不想出現(xiàn)這種情況，可以在index.tsx中找到下面的代碼：

root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);

修改為：

root.render(
    <RouterProvider router={router}/>
);

問題解決。

以上就是React Hooks: useEffect()調(diào)用了兩次問題分析的詳細(xì)內(nèi)容，更多關(guān)于React Hooks useEffect()調(diào)用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

詳解React 中組件通信的幾種主要方式
本文主要介紹了詳解React 中組件通信的幾種主要方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2025-09-09
一篇文章介紹redux、react-redux、redux-saga總結(jié)
這篇文章主要介紹了一篇文章介紹redux、react-redux、redux-saga總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-05-05
詳解React?ISR如何實(shí)現(xiàn)Demo
這篇文章主要為大家介紹了React?ISR如何實(shí)現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
一文搞懂redux在react中的初步用法
Redux是JavaScript狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理，今天通過本文給大家分享redux在react中使用及配置redux到react項(xiàng)目中的方法，感興趣的朋友跟隨小編一起看看吧
2021-06-06
React如何將組件渲染到指定DOM節(jié)點(diǎn)詳解
這篇文章主要給大家介紹了關(guān)于React如何將組件渲染到指定DOM節(jié)點(diǎn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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
在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è)最簡單ErrorBoundary組件處理react異常
這篇文章主要介紹了一個(gè)處理react異常的ErrorBoundary組件,簡單實(shí)用,代碼詳細(xì),對(duì)這個(gè)組件感興趣的朋友可以參考下
2021-04-04
React開啟代理的2種實(shí)用方式
最近有不少伙伴詢問react的代理配置,自己也去試驗(yàn)了一下發(fā)現(xiàn)不少的問題,在這就將所遇到的心得分享出來,這篇文章主要給大家介紹了關(guān)于React開啟代理的2種實(shí)用方式的相關(guān)資料,需要的朋友可以參考下
2021-07-07
react使用css module無法重寫bootstrap樣式問題及解決
這篇文章主要介紹了react使用css module無法重寫bootstrap樣式問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11