小程序自定义组件的坑： thirdScriptError sdk uncaught third Error Cannot read property 'name' of undefined

你的名字 2022-05-18 00:09 45阅读 0赞

最近在开发微信小程序的自定义组件转盘类的，不小心又踩坑里去了。。。

调试器上出现这种报错：

> **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
           }
        ],
     }
    }

好了，问题解决！

以后还是得多注意啊~~