【Copy攻城獅日志】踩坑小程序之can't read property 'of

hsluoyz 發(fā)布于2019-08-26 13:42 / 3537人閱讀

摘要：根據(jù)當時的情境，是在微信開發(fā)者工具中刪掉該小程序然后重新載入就解決了，大家給出的結(jié)論是微信小程序開發(fā)者工具的。

Created 2019-4-2 22:17:34 by huqi
Updated 2019-4-2 23:17:34 by huqi

↑開局一張圖，故事全靠編↑

從一個需求說起

接觸過小程序的同學應該都接觸過這樣一個需求：點擊列表頁的某一項，進入詳情頁。同樣，今天我也遇到這樣一個需求，其實很簡單的一個需求，無非就是一個tap事件加dataset傳參實現(xiàn)路由帶參數(shù)跳轉(zhuǎn)到詳情頁。以前開發(fā)小程序的時候，也處理過這樣的需求，本來應該是得心應手的。不過，可能是Copy別人代碼Copy得太多太久太深，也從來沒自主去想過別人為什么這樣寫、換種方式要怎樣寫、為什么換種方式就會報錯等等諸如此類的問題，更別說去熟讀開源源碼，甚至自己造輪子。有時候反思，自己入行這么多年了，資質(zhì)依舊平平，別說造輪子，就算是把別人輪子拿過來安上，都能整出一堆B.U.G。就比如開頭的圖片上，用的是鵝廠旗下某著名公司的豪華套餐，居然被我用得翻車了！--TypeError: Cannot read property "offsetLeft" of undefined !!!簡直了，還是只能怪自己技術(shù)太low了。

（圖片來源于網(wǎng)絡）

提問的智慧

自從朋友給了我一個SS的IP和密碼，現(xiàn)在我一有問題就是直接google開干。在我看來，與其把問題拋到各種廣告滿天飛的技術(shù)群或者丟給朋友圈里邊的大佬，倒不如自己先動手解決，哪怕是嘗試了所有的答案，至少對問題會有更深的理解，以后面試中遇到面試官問您在項目中遇到過什么問題之類的，因為經(jīng)過自己的一番搜索加實踐，一般印象會深刻很多。反而別人直接告訴您答案的，可能您的成本更小，但是收獲甚微。根據(jù)以往的經(jīng)驗，遇到問題，自己動手，是更接近答案的唯一出路。或許您在開發(fā)中，遇到了某些問題，您通過一些途徑解決了這個問題，然后，您又記錄了下來，后續(xù)您遇到同樣的問題，應該是可以迎刃而解的。如果您還把解決方案分享出來了，您簡直是在造福人類。后來者，托您的福，更快的解決了同樣的問題。

嘗試方案1--重啟開發(fā)者工具

can"t read property "offsetLeft" of undefined #1132
這是來自全球最大的同性交友網(wǎng)站GitHub上的一個issue，是由@yuwanlin 在一套遵循 React 語法規(guī)范的多端統(tǒng)一開發(fā)框架Taro中提出來的。根據(jù)當時的情境，是在微信開發(fā)者工具中刪掉該小程序然后重新載入就解決了，大家給出的結(jié)論是微信小程序開發(fā)者工具的B.U.G。(注：該操作不會刪除文件，請放心使用)--但是，我按照樓主的說法操作了一遍，結(jié)果然并卵，還是原來的B.U.G，還是一樣的報錯。
該方案失敗

嘗試方案2--外層加view

自定義組件在首次點擊后會報錯
@歐新志這個小咯咯在2018-06-14向微信社區(qū)提出了類似的問題，他那個是自定義組件在點擊之后出現(xiàn)了和我同款的B.U.G，而且也是存在嵌套子組件。評論中各位大神給出的答案是嵌套view。我也嘗試了，試著加了一層view，但是問題依舊存在。不過我感還是和嵌套的子組件有關(guān)。于是，我各種嘗試終于找到了一個方案。

第一次滾動和點擊的時候都有這個報錯,

下面是報錯時的組件wxml

如果換成下面這樣就不報錯了

解決方案3--tap事件加在子組件里面

原代碼：

    
      
        
          
          
            
              {{item.name}}
            
            
              {{item.business}}
            
            
              {{item.time}}
            
            
              {{item.status}}

修改之后：

    
      
        
          
          
            
              {{item.name}}
            
            
              {{item.business}}
            
            
              {{item.time}}
            
            
              {{item.status}}

只是把方法掛載到了不同的位置，確實截然不同的效果。看來接下來應該再研究一下小程序的組件。