React中render 下獲取子級資料錯誤問題

2021-10-09 11:47:49 字數 1357 閱讀 3695

今天react+antd+mobx專案開發的時候,遇到了乙個問題,應該是生命週期渲染問題吧。

具體是這樣的:

**位於render(){}中,這裡假定我要獲取data.questionnaiteproblemlist下的第一項的id。data是獲取到的資料物件,其中包含乙個物件陣列questionnaireproblemlist,為了後續**使用方便,我將其賦值給quelist。這裡的console自動執行了兩次。

render())}

consloe結果:(自動執行了兩次)

// 第一次的console.log(data)的結果,展開沒有資料

undefined // 第一次的console.log(quelist)的結果,顯而易見也未獲取到值

// 第二次的console.log(data)的結果,有實際資料

' at position 37: …tadministration}̲questionnairede…mobx: observableobjectadministration , name: 「[email protected]」, defaultenhancer: ƒ, values: }get questionnairedesc: ƒ ()set questionnairedesc: ƒ (v)get questionnaireitemid: ƒ ()set questionnaireitemid: ƒ (v)get questionnaireproblemlist: ƒ ()set questionnaireproblemlist: ƒ (v)get questionnairetitle: ƒ ()set questionnairetitle: ƒ (v)proto: object

// 第二次的console.log(quelist)的結果,有實際資料

observablearray

在實際使執行中下面這一行會報錯

報錯:

typeerror: cannot read property 『0』 of undefined

換一種用法,比如map(),會提示map沒有定義。。。。總之陣列的所有用法都會報錯,就好像編譯器不知道他是陣列一樣。

我查了很久,始終沒有找到答案,大概是我的描述不夠準確的原因。後來想到了問題的原因可能是『兩次渲染執行』的原因,畢竟console執行了兩次。於是我就試了一下『&&』斷路一下。

**改為:

結果奇蹟般的可以了。。。後來一想,可能第一次渲染,因為是undefined的原因,所以無法斷定他是陣列,導致使用陣列相關操作會報錯。當使用『&&』後,第一次渲染到此處,斷路,待第二次渲染時,quelist已獲得資料,就可以繼續執行了。

至於為什麼執行了兩次。。。這裡不作解釋,自行檢視:react頁面渲染邏輯。

react中關於render渲染次數的效能優化

在普通元件裡面可以使用shouldcomponentupdate鉤子函式提公升react效能。nextprops,nextstate 在內部可以判斷元件外部接受的最新屬性與之前的屬性是否一致,從而約束render重新整理的時機。只要結果返回true,render就會立馬執行渲染更新,返回false就...

React中render內不能直接使用物件解決方法

報錯資訊當時沒記下來,只記得情景。業務 不好貼上,直接寫幾個demo值,沒加樣式等,簡單模擬。食物種類 div 蘋果種類 label span div 牛奶種類 label span div 橘子種類 label span div div export default demo這麼寫會報錯,food...

React 如何阻止render重複渲染相同的資料

記錄react學習遇到的問題 react官方說明 import react from react class demo extends purecomponent 如果賦予 react 元件相同的 props 和 state,render 函式會渲染相同的內容,那麼在某些情況下使用 react.pu...