本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。

(資料圖)

react有數(shù)據(jù)但渲染不上怎么辦？

react 獲取后臺(tái)數(shù)據(jù)渲染頁(yè)面不顯示

問(wèn)題描述：

想要的結(jié)果：在一個(gè) react的 Component獲取后臺(tái)的數(shù)據(jù)并顯示，頁(yè)面第一次渲染時(shí)就顯示

進(jìn)行的嘗試：在組件外定義了一個(gè) getXXX方法，使用 axios請(qǐng)求后臺(tái)的結(jié)果，在 Component的構(gòu)造方法里調(diào)用該方法，將該方法的結(jié)果賦值給 state屬性里

bug結(jié)果： 后臺(tái)數(shù)據(jù)接收到了請(qǐng)求，并正確返回結(jié)果，但是頁(yè)面卻沒(méi)有渲染，使用 console輸出 GetXXX的結(jié)果，結(jié)果是正確的

bug排查：已確定后臺(tái)收到請(qǐng)求并返回正確結(jié)果，前端也輸出正確結(jié)果，也就說(shuō)明是頁(yè)面渲染先于獲取到數(shù)據(jù)，但是react組件的加載順序是先構(gòu)造方法，再去調(diào)用render。所以只可能是異步的問(wèn)題

分析: axios是一個(gè)異步請(qǐng)求，構(gòu)造方法中調(diào)用這個(gè)方法，但是沒(méi)有立刻獲取到結(jié)果，所以 state賦值的是一個(gè) 結(jié)果的成員變量，結(jié)果肯定是空，所以渲染的頁(yè)面也無(wú)數(shù)據(jù)的

進(jìn)行的嘗試： 在render方法里使用axios請(qǐng)求，獲取到結(jié)果后使用setState方法將結(jié)果賦值給state。結(jié)果運(yùn)行報(bào)錯(cuò)，因?yàn)闀?huì)造成死循環(huán)，因?yàn)?setState會(huì)更新頁(yè)面，即調(diào)用render方法，在 render方法里調(diào)用setState會(huì)造成死循環(huán)

正確處理方：在構(gòu)造方法里，調(diào)用getXXX方法，在getXXX方法里設(shè)置setState,這樣頁(yè)面會(huì)先進(jìn)行渲染（數(shù)據(jù)結(jié)果為空），當(dāng)getXXX的請(qǐng)求收到服務(wù)器的響應(yīng)后，執(zhí)行setState時(shí)，會(huì)重新觸發(fā)頁(yè)面渲染。因?yàn)檎?qǐng)求響應(yīng)的時(shí)間與服務(wù)器處理有關(guān)，當(dāng)響應(yīng)時(shí)間很短時(shí)，前端就看不見(jiàn)數(shù)據(jù)為空的結(jié)果，后臺(tái)響應(yīng)時(shí)間較長(zhǎng)的情況，可以加一個(gè) Antd的加載組件 Spin,提示正在加載

推薦學(xué)習(xí)：《react視頻教程》

以上就是react有數(shù)據(jù)但渲染不上怎么辦的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞： React