react有數據但渲染不上如何解決

本篇內容主要講解“react有數據但渲染不上如何解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“react有數據但渲染不上如何解決”吧!

react有數據但渲染不上的解決辦法：1、在構造方法里，調用getXXX方法；2、在getXXX方法里設置setState；3、當getXXX的請求收到服務器的響應后，執行setState時，重新觸發頁面渲染即可。

react 獲取后臺數據渲染頁面不顯示

問題描述：

• 想要的結果：在一個 react 的 Component 獲取后臺的數據并顯示，頁面第一次渲染時就顯示

• 進行的嘗試：在組件外定義了一個 getXXX 方法，使用 axios 請求后臺的結果，在 Component 的構造方法里調用該方法，將該方法的結果賦值給 state 屬性里

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

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

• 分析: axios是一個異步請求，構造方法中調用這個方法，但是沒有立刻獲取到結果，所以 state 賦值的是一個 結果的成員變量，結果肯定是空，所以渲染的頁面也無數據的

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

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

到此，相信大家對“react有數據但渲染不上如何解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！