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

(資料圖)

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

react 獲取后臺數(shù)據(jù)渲染頁面不顯示

問題描述：

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

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

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

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

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

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

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

推薦學習：《react視頻教程》

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

關(guān)鍵詞： React