微信小程序自定义组件传值无效问题

问题详情

• 在学习微信小程序的时候,有一个自定义组件stars,用于处理用户的评分.这个组件传入接口获取到的数据,然后经过一系列转换显示相应的分数和对应的星星个数.如果没有评分,则显示未评价的信息.预期效果如下
  
• 但是在数据传递之后,发现有一部分组件的数据能正确渲染,但是有一部分的数据却始终显示未评价的样式,查看appData可以看到接口数据是正确返回的,那么问题出现在哪里呢,下面让我们一探究竟.错误样式如下(也就是传递了数据无法正确计算渲染)
  

问题分析

• 首先确认,接口拿到的数据是正确的
• 其次,确认组件的 properties 类型正确,可以正确接收到传入的属性.这时可以在 attached 生命周期中打印 this.properties.xxx来查看是否正确接收
• 既然可以正确接收到数据,为什么渲染时会出错呢?其实这涉及到组件生命周期的一点小问题.
• 我们在获取数据的时候,通常都是在Component 的 attached 生命周期中获取并计算的,而 attached 生命周期是在组件实例进入页面节点树时执行,那么这时我们就需要考虑一个问题.我们是数据是在组件实例进入页面节点树时就已经拿到了还是在进入页面节点树之后呢?如果组件实例在进入页面节点树的时候数据还没有拿到,那么组件是不会等待数据的,而是会依据已经设定的默认值来显示.而在上述问题中,组件传入的数据是通过接口异步获取的,数据的获取势必会需要耗费一定的时间,虽然不一定很久,但是可能在此期间组件就已经被加载渲染了,所以就会出现上面未评分的情况

问题解决

• 那么了解了问题的本质所在,我们就可以利用 properties 定义时的 observer 属性来解决这个问题.

• observer 属性是属性值变化时的回调函数,也就是说,无论什么时候,只要传递的属性变化了,就会触发这个回调函数.那么我们就可以在这个回调函数中手动改变它的值,从而能让数据正确显示

  rate: {
    type: Number,
    value: 0,
    observer: function(newVal, oldVal) {
      this.updateRate()		//这里通过this.updateRate()方法来更新数据
    }
  }
  

总结

• 在开发中注意生命周期函数的使用,熟悉各个生命周期页面的变化,这种问题就可以迎刃而解了