React Hooks: useEffect()調(diào)用了兩次問題分析
更新時間：2023年11月23日 09:58:36 作者：來了老弟
這篇文章主要為大家介紹了React Hooks: useEffect()調(diào)用了兩次問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
正文
使用create-react-app腳手架創(chuàng)建的React前端項目，在函數(shù)式組件中使用useEffect加載接口數(shù)據(jù)時 發(fā)現(xiàn)一個奇怪的問題：刷新頁面接口調(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)境不會出現(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)用的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
從零搭建Webpack5-react腳手架的實現(xiàn)步驟(附源碼)
本文主要介紹了從零搭建Webpack5-react腳手架的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家介紹了React?保留和重置State實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
React router cache route實現(xiàn)緩存頁面流程介紹
react-router自身沒有路由緩存的特性，在5.x版本之前，我們可以基于react-router-cache-route來實現(xiàn)路由緩存功能。但是react-router 6.x在實現(xiàn)上做了比較大的變化，react-router-cache-route沒有提供相應(yīng)的支持2023-01-01
create-react-app全家桶router?mobx全局安裝配置
這篇文章主要為大家介紹了create-react-app全家桶router?mobx全局安裝配置，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
深入學(xué)習(xí)TypeScript 、React、 Redux和Ant-Design的最佳實踐
這篇文章主要介紹了深入學(xué)習(xí)TypeScript 、React、 Redux和Ant-Design的最佳實踐，TypeScript 增加了代碼的可讀性和可維護性，擁有活躍的社區(qū)，,需要的朋友可以參考下2019-06-06
React?Native?加載H5頁面的實現(xiàn)方法
這篇文章主要介紹了React?Native?加載H5頁面的實現(xiàn)方法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了react 下拉框內(nèi)容回顯,實現(xiàn)思路是通過將下拉框選項的value和label一起存儲到state中, 初始化表單數(shù)據(jù)時將faqType對應(yīng)的label查找出來并設(shè)置到Form.Item中,最后修改useEffect,需要的朋友可以參考下2024-05-05
React中的setState使用細(xì)節(jié)和原理解析(最新推薦)
這篇文章主要介紹了React中的setState使用細(xì)節(jié)和原理解析(最新推薦),前面我們有使用過setState的基本使用, 接下來我們對setState使用進行詳細(xì)的介紹，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了react組件實例屬性props,本文結(jié)合實例代碼給大家簡單介紹了props使用方法，代碼簡單易懂，需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了react四大核心內(nèi)容架構(gòu)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03