react有資料但渲染不上怎麼辦

react有資料但渲染不上的解決方法：1、在建構方法裡，呼叫getXXX方法；2、在getXXX方法裡設定setState；3、當getXXX的請求收到伺服器的回應後，執行setState時，重新觸發頁面渲染即可。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react有資料但渲染不上怎麼辦？

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影片教學》

以上是react有資料但渲染不上怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！