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