最近在開發微信小程式的自定義元件轉盤類的，不小心又踩坑裡去了。。。

偵錯程式上出現這種報錯：

thirdScriptError 
sdk uncaught third Error 
Cannot read property 'name' of undefined 
TypeError: Cannot read property 'name' of undefined

仔細檢查了程式碼半天，感覺沒啥錯啊，網上也找不到答案，最後又下定決心從頭開始在檢查一遍，最終還是找到了！

所以釋出這邊文章，在這裡記錄下

下面貼上一點自定義元件裡的程式碼片段：

Component({
   options: {
      multipleSlots: true // 在元件定義時的選項中啟用多slot支援
   },

   /**
    * 元件的屬性列表
    * 用於元件自定義設定
    * 元件的對外屬性
    */
   properties: {

      xiaojuedingArr: { // 可以切換的轉盤選項, 支援多個
         type: Array,
         value: [
            {
               id: 0,
               option: '轉盤的標題名稱',
               awards: [
                  {
                     id: 0,
                     name: "最多17個選項", // 選項名
                     color: 'red',        // 選項的背景顏色
                     probability: 0       // 概率
                  },
                  {
                     id: 1,
                     name: "單個選項最多填13字", // 超過9個字時字型會變小點
                     color: 'green',
                     probability: 0
                  }
               ],
            }
         ]
      },

      // 限制：最多17個選項， 單個選項最多填10-13個字, 選項名稱最多21個字
      awardsConfig: { // 預設的當前轉盤選項 
         option: '我的小決定？',
         awards: [
            {
               id: 0,
               name: "最多17個選項",
               color: 'red',
               probability: 0
            },
            {
               id: 1,
               name: "單個選項最多填13字",
               color: 'green',
               probability: 0
            }
         ],
      }

   },

   /**
    * 私有資料,元件的初始資料
    * 可用於模版渲染
    */
   data: {
      animationData: {}, // 轉盤動畫
   },

   //元件生命週期函式，在元件例項進入頁面節點樹時執行，注意此時不能呼叫 setData
   created: function () {
      console.log('==========created==========');
   },

   // 元件生命週期函式，在元件例項進入頁面節點樹時執行
   attached: function () {
      console.log('==========attached==========');
      var awardsConfig = this.data.xiaojuedingArr[0];
      
      this.setData({
         awardsConfig: awardsConfig
      })
      this.initAdards();
   },

   /**
    * 元件的方法列表
    * 更新屬性和資料的方法與更新頁面資料的方法類似
    */
   methods: {

      //初始化資料
      initAdards() {},

      /*
       * 內部私有方法建議以下劃線開頭
       */

      //重置轉盤
      _repeat() {}
   }
})
 

結果問題時出現在元件構造器 properties 中的這個自定義屬性 awardsConfig，

因為自定義屬性規定了屬性的型別（必填）

myProperty: {    // 屬性名  
  type: String, // 型別（必填），目前接受的型別包括：String, Number, Boolean, Object, Array, null（表示任意型別）
  value: '',    // 屬性預設 初始值（可選），如果未指定則會根據型別選擇一個
  observer: function (newVal, oldVal, changedPath) {
  // 屬性被改變時執行的函式（可選）
	
  }
},
 

我是把沒封裝之前的程式碼直接複製過來的，結果就踩了這個坑，最後把這個屬性改成這樣：

awardsConfig: { // 預設的當前轉盤選項 
 type: Object,
 value:{
    option: '我的小決定？',
    awards: [
       {
          id: 0,
          name: "最多17個選項",
          color: 'red',
          probability: 0
       },
       {
          id: 1,
          name: "單個選項最多填13字",
          color: 'green',
          probability: 0
       }
    ],
 }
}

好了，問題解決！

以後還是得多注意啊~~